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

html部分

<el-form-item prop="pictures" label="图片集">
    <el-upload
	:action="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">
	<i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
	<img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</el-form-item>

js部分

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

                        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;
			  }

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