vue中使用element-ui上传图片编辑回显的

最新推荐文章于 2025-09-24 10:15:10 发布

原创最新推荐文章于 2025-09-24 10:15:10 发布 · 2w 阅读

54 ·

CC 4.0 BY-SA版权

文章标签：

#vue #upload #element

前端专栏收录该内容

19 篇文章

订阅专栏

博客围绕Element上传图片回显问题展开，提及项目中上传单张和多张图片的情况，包括图片回显、文件格式验证与大小检测、阻止上传操作、自定义上传函数等，还介绍了上传图片达10张时隐藏上传组件的操作及更优的computed方法解决方案。

部署运行你感兴趣的模型镜像

element上传图片回显问题

在项目中会使用到element上传图片预览问题,上传一张也许简单,但是上传多张就有一些坑了,贴上代码

// HTML
<div class="form-item-height">
   <label class="text-right">添加商品图片:</label>
   <el-upload
     action="string"  //使用自定义上传任意写一个
     list-type="picture-card"
     accept=".jpg,.jpeg,.png,.bmp" //接收上传文件类型
     :http-request="uploadImg"   //自定义上传文件函数
     :on-preview="handlePictureCardPreview"
     :on-remove="handleRemove"
     :on-change="maxUploadNum"
     :before-upload="checkUpload"
     :limit="10"
     :file-list="imgFilesList"
   >
     <i class="el-icon-plus"></i>
   </el-upload>
   <el-dialog :visible.sync="dialogVisible" size="tiny">
     <img width="100%" :src="dialogImageUrl" alt>
   </el-dialog>
 </div>

在刚开始的时候不知道图片怎么回显,看到element有个属性file-list,接收一个Array,贴上代码

//js imgFilesList 后台返回base64数据
res.data.data.file.forEach(item => {  //处理图片需要转格式
   let imageUrl = `data:image/${item.type};base64,`+ item.image;
   this.imgFilesList.push({
     "url": imageUrl,
     "name":item.name,
     "id": item.id
   })
 })

文件格式验证以及大小,检测文件return false会默认阻止后面上传操作

 //js 检查图片文件类型和大小
 checkUpload(file) {
    let fileName = file.name,regex = /(.jpg|.jpeg|.png|.bmp)$/;  //图片格式
    let isImg = regex.test(fileName.toLowerCase());
    let isLt2M = file.size / 1024 / 1024 < 2; //上传大小2m
    if (!isImg) {
        this.$message.error('请选择图片文件');
    }
    if(!isLt2M) {
      this.$message.error('上传图片的大小不能超过2M!');
    }
    return isLt2M && isImg
  },

自定义上传函数覆盖默认上传

// js 上传图片
  uploadImg(file) {
     let formData = new FormData();
     formData.append(file.filename, file.file, file.file.name)
     uploadProductImg(formData).then(res => {
       if (res.data.success) {
	//TO DO
         this.$message.success(res.data.message);
       } else {
         this.$message.error(res.data.message);
       }
     });
   },

当上传图片个数达到10张时,隐藏上传组件,显示图片list,我是直接操作DOM,后面看到了更优的解决方案 ,使用computed方法

//上传最大的图片个数
 maxUploadNum(file, fileList) {
    let imgLength = fileList.length,uploadBtn = document.getElementsByClassName('el-upload')[0]
    if(imgLength >= 10) {
      uploadBtn.style.display = "none"
    }
  },
 // 删除图片
 handleRemove(file, fileList) {
  let deleteID = null,imgLength = fileList.length,uploadBtn = document.getElementsByClassName('el-upload')[0]
   if(imgLength < 10) {
     uploadBtn.style.display = "inline-block"
   }  
 }
//删除图片调用API