Vue +Element Ui 使用Upload组件实现多图片上传

HTML部分

"pictures" label="图片集">
    "uploadUrls"
	:multiple = true
	list-type="picture-card"
	:with-credentials='true'
	:on-preview="handlePictureCardPreview"
	:on-remove="handleRemove"
	:on-error="handleError"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload">
	"el-icon-plus">
    
    "dialogVisible">
	"100%" :src="dialogImageUrl" alt="">
    
复制代码

JS部分

data: function() {
	return {
		dialogImageUrl: '',
		dialogVisible: false,
		uploadUrls: this.BASE_URL + '/admin/upload_image'
         }
}复制代码

methods部分

                        handleRemove(file, fileList) {//移除
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {//预览
				console.log(file)
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleError(err, file, fileList){//上传失败
				console.log(err)
			},
			beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
				console.log(file);
				const isJPG = true;
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
				  this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			  },
			handleAvatarSuccess(res, file) {//图片上传成功
				var files = res.data.file;
				this.form.pictures.push(files)				
				this.dialogImageUrl = this.IMAGE_URL + '/image/' + res.data.file;
			  }复制代码

图片上传成功之后，将图片地址以数组的形式展示给后端