上传
将本地的电子书上传到服务端
现在的node服务位于本地 电子书就会上传到本地的文件夹,如果node服务部署在远端,比如说阿里云,那电子书就可以上传到阿里云服务器上
框架
新建book/components
把业务组件存放到components目录,把全局的通用组件放在src的components下,方便所有的页面进行复用。
新建book/components/Detail.vue
创建两个组件 book/create.vue book/edit.vue,因为电子书上传有两个场景,第一个是一本电子书都没有的时候去上传电子书,还有种场景是已经有电子书,去编辑电子书的时候。仍然是进入到电子书上传的页面(Detail.vue)
其中edit组件不希望他在我们的菜单中出现,因为编辑电子书肯定是要在列表当中选择一个,需要带入参数的。不想让他出现–hidden属性。还有希望高亮显示到图书列表,meta activeMenu指定高亮的路由
在edit和create组件里引入detail组件
在Detail.vue中接收一个参数 isEdit
create:
edit:
Detail.vue
sticky组件 ; 按钮:编辑的时候不需要显示帮助
给编辑/新增电子书按钮增加v-loading 默认false
新增一个样式
这个status可以放什么值呢
可以 查一下全局样式sub-navbar
这里有个细节,向sticky传入的并不是通常的class绑定,而是通过className,这是因为className其实是sticly的一个属性
然后会绑定到对应的div上
如果希望把某些元素的class交给子组件或者父组件引用的时候去使用的话就可以定义一个props 然后传入className这样一个方法
到现在sticky就实现了
接着写表单
可以用el-row来编写
表单容器分为两部分,写两个el-col
上面一部分是上传的组件,写一个el-col 可以将整个页面分成24份(占满一屏)
我们还可以写一个Warning组件,可以做一些提醒,
aside :h5的一个新的标签
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside
上传组件 &token认证
src/components/EbookUpload/index.vue
在Detail.vue里引入
element ui里的组件:el-upload
点击上传
意思是需要一个接口地址
这个action不需要之前的request库,因为el-upload会自动给我们上传
之后会定义一个/book/upload的上传接口
上传的时候就会调用这个接口
报401错误 鉴权问题(之前设置了白名单是/和/login 其他接口都要带上token)
所以说上传的时候也要做token验证
增加headers (可以看el-upload文档) 可以给他写成一个计算属性,因为headers是需要动态进行计算,只要计算值没有变更的时候就不需要进行变更
在headers里要加入authorization
这样就可以完成token认证了
现在报404接口不存在的错误了
接下来就可以开发接口了
上传组件开发
:multiply表示一次是否能上传多本电子书
limit
beforeUpload 上传之前被调用 这里他的作用是调用父组件的一个事件,这个逻辑交给父组件去做,接收file参数传给父组件
成功调用事件 失败调用事件 移除事件 传入超过数量事件
:file-list 在编译的时候预先就要把fileList传入到el-upload中,这样的话上传的控件里面才能看到内容
drag show-file-list accept(接收的资源类型application/epub+zip 不是这个类型的上传不了)
:disabled 当用户上传完电子书以后就不允许他上传了,可以设为true来触发这样一个效果
err打印
加个小上传图标
这是el-upload内置的样式 会对文字做一些处理
api开发
分别是电子书文件,电子书封面,解压后的电子书
这是nginx路径,为什么要把它放到nginx路径能
这样做有个好处,就是当电子书上传到这个路径之后会自动生成一个链接
这样就可以直接通过链接来访问到资源
之后,需要使用multer库 也是一个express的中间件来开发文件上传功能
router/book.js
将所有经过book的路由都委托给bookRouter来处理
这样就可以在book文件里写嵌套路由
book.js:
调用express的Router()方法生成一个router对象
然后在对象当中调用get或post来创建请求
之后再export router就ok
上传单个文件,同时把单个文件信息放到req.file上
上传试一下,可以看到已经上传成功
上传组件功能完善
有个细节 虽然是同一本电子书但是他们名称不一样,这是multer帮我们做的事情,不然我们还要写代码改文件名字
完善onSuccess 传入两个参数 response ,file
打印一下response
这里可以拿到服务端返回的信息
拿到msg以后就可以给用户反馈上传成功
触发父组件
移除事件
超出上传数量事件
Detail.vue
fileList用途 在编辑的时候获取到电子书以后把它放到fileList 默认的时候上传组件就会有文件展示出来,
:disabled=“isEdit” 表示处于编辑状态的时候EbookUpload是点击不了不可用的
成功和移除的事件后面再写
电子书表单开发
在点击新增电子书的时候,提交的并不是ebook-upload这个组件里的内容,而是需要解析出来电子书的内容,通过这部分的内容产生表单,然后提交表单里面的内容。
这时候添加一个表单,这个表单默认的时候是空的,通过ebook-upload组件上传,然后会从服务端返回一个data对象,这个对象就是电子书对象
这个对象可以从response里面拿(暂未开发)
先把表单样式写出来
用到的知识点
el-from-item
prop属性 在表单规则校验的时候使用
MDinput组件 required 必须要输入
el-row
el-col :sapn=“12” 一半
具体代码去这里看
https://www.youbaobao.xyz/admin-docs/guide/exercise/upload.html
解决label是上下排列 还有两个label挨得紧
label-width
点击封面功能
el-tree