如何用element的upload组件实现多图片上传及压缩功能？

本文共计417个文字，预计阅读时间需要2分钟。

我使用Vuex进行状态管理，利用七牛云搭建图床。项目地址：- 多图上传组件- 效果展示- 项目执行流程- 首先介绍多图上传组件的实现流程：

前端向后端请求上传接口，后端接收文件并上传至七牛云，返回图片链接。

我用vuex做状态管理，七牛云做图床。

项目地址：多图片上传组件

效果展示

项目执行流程

首先，让我们来分析一下实现多图片上传的流程：

• 前端向后端请求用来上传图片至服务器的token
• 后端为每张要上传的图片生成一个图片名，并用这个图片名生成token
• 后端将图片名和token返回给前端
• 前端拿到token以后，将图片上传至服务器
• 上传成功以后，前端将图片名发给后端
• 后端将图片名存入数据库
  

项目实现过程

1.我们要利用element-ui的Upload组件布置界面：

//upload.vue <el-upload :action= domain ref="upload" accept='image/jpeg,image/gif,image/png' :auto-upload="false" :${this.qiniuaddr}/${key}`) switch(this.imgsList.length) { case 4: this.img4 = this.imgsList[3] case 3: this.img3 = this.imgsList[2] case 2: this.img2 = this.imgsList[1] case 1: this.img1 = this.imgsList[0] } let obj = { goods_img1: this.img1, goods_img2:this.img2, goods_img3:this.img3, goods_img4:this.img4 } //将信息发送给后端 this.actionPublish(obj)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。