电子书上传组件

上传

将本地的电子书上传到服务端

现在的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

猜你喜欢

转载自blog.csdn.net/xiaozhazhazhazha/article/details/119283700