elementui + vue 上传多张图片

最新推荐文章于 2024-07-23 15:11:30 发布

不完美女孩-

最新推荐文章于 2024-07-23 15:11:30 发布

阅读量707

点赞数 2

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/LJJONESEED/article/details/126769114

版权

这个博客展示了如何在前端实现一个包含图片上传、预览、移除功能的组件。通过`el-form-item`、`el-upload`等Element UI组件，配合`handlePicPreview`、`handleRemove`等方法处理图片操作。同时，它限制了上传文件类型为图片且大小不超过3MB，并使用`axios`进行文件上传，更新文件列表并保存相关数据。

摘要由CSDN通过智能技术生成

<el-form-item label="证明材料：" id="supmeta">
  <el-upload
     class="avatar-uploader"
     ref="otherLicense"
     action
     :auto-upload="false"
     :on-preview="handlePicPreview"
     :on-remove="handleRemove"
     :file-list="fileList"
     :on-change="otherSectionFile"
     list-type="picture-card"
     multiple
   >
     <i class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
   <el-dialog :visible.sync="dialogVisible">
     <img width="100%" :src="dialogImageUrl" class="avatar" />
   </el-dialog>
 </el-form-item>

 data() {
   return {
     fileList: {},
     dialogVisible: false,
     dialogImageUrl: "",
   };
 },

 handlePicPreview(file) {
   this.dialogImageUrl = file.url;
   this.dialogVisible = true;
 },
 handleRemove(file, fileList) {
   this.fileList.map((item, index) => {
     if (item.uid == file.uid) {
       this.fileList.splice(index, 1);
     }
   });
 },
 beforeRemove(file, fileList) {
   return this.$confirm(`确定移除 ${file.name}？`);
 },

 otherSectionFile(file) {
   const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
   const isJPG = typeArr.indexOf(file.raw.type) !== -1;
   const isLt3M = file.size / 1024 / 1024 < 3;
   if (!isJPG) {
     this.$message.error("只能是图片!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   if (!isLt3M) {
     this.$message.error("上传图片大小不能超过 3MB!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   this.otherFiles = file.raw;
   // FormData 对象
   var formData = new FormData();
   // 文件对象
   formData.append("file", this.otherFiles);
   formData.append("filePath", "yuanchengyiliao");
   let config = {
     headers: {
       "Content-Type": "multipart/form-data",
     },
     methods: "post",
   };
   //调取接口，这里我的接口是封装好的
   this.$axios.bussUpload(formData, config).then((res) => {
     this.fileList.push(file);
     if (res.data.flag == "S") {
       this.otherPhotoObj = res.data.data.objectId;
       this.otherPhoto = res.data.data.url;
       this.otherLicense.push({
         certificationName: this.form.certificationName,
         certificationObj: this.otherPhotoObj,
         certificationUrl: this.otherPhoto,
       });
     } else {
       this.$message.error(res.data.message);
     }
   });
 },