我用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"
:http-request="upqiniu"
:limit="limit"
:multiple="multiple"
list-type="picture-card"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-change="handldChange"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
domain 指的是我们的上传地址，
upqiniu 是我们自定义的上传方法，
beforeUpload 是图片上传前执行的方法。关于该组件的其他用法可以在element的官方文档查阅：Upload 上传2.对图片进行压缩
// upload.vue
imgQuality: 0.5, //压缩图片的质量dataURItoBlob(dataURI, type) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: type});
},
beforeUpload(param) {
//对图片进行压缩
const imgSize = param.size / 1024 / 1024
if(imgSize > 1) {
const _this = this
return new Promise(resolve => {
const reader = new FileReader()
const image = new Image()
image.onload = (imageEvent) => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width * _this.imgQuality
const height = image.height * _this.imgQuality
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
context.drawImage(image, 0, 0, width, height);
const dataUrl = canvas.toDataURL(param.type);
