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; }图片上传成功之后，将图片地址以数组的形式展示给后端
