el-upload 自定义上传图片踩的坑

最新推荐文章于 2024-05-08 20:05:02 发布

Mrs.攻城狮女

最新推荐文章于 2024-05-08 20:05:02 发布

阅读量309

点赞数

文章标签：前端 css elementui vue.js

本文链接：https://blog.csdn.net/Emma1314PYT/article/details/127663564

版权

el-upload 自定义上传图片踩的坑(不使用action)

项目需求

添加时上传图片限制9张，每张不超过2M
编辑时需要回显已经上传成功的图片
支持删除和再次上传图片

// An highlighted block
<el-upload
   action="#"
   list-type="picture-card"
   :on-remove="removeZL"
   :file-list="zlFileList"
   :before-upload="beforeUpload"
   :on-exceed="maxError"
   :http-request="httpRequest"
   :limit="9"
>
<i class="el-icon-plus"></i>
</el-upload>

//编辑初始化-从上一页带过来的item里面包含了已经上传成功的图片信息
this.item = this.$route.query.item;
this.item.zlList.map((ele) => {
  this.zlFileList.push({ id: ele.imageId, url: ele.uri, name: ele.fileName });
});
//上传数量超过9张的提示
maxError(file, fileList) {
   if (fileList.length === 9) {
      this.$message.error("最多可上传9张图片！");
    }
 },
 //自定义上传图片（接口返回值塞到要显示的fileList中）
    httpRequest(pic) {
    //入参需要通过formData的形式拼接
      const fd = new FormData();
      fd.append("file", pic.file);
      api.upload(fd).then((res) => {
        this.zlFileList.push({
          id: res.body.imageId,
          url: res.body.uri,
          name: res.body.fileName,
        });
      });
    },
 //发现每次上传都有图片抖动一下才成功的情况，通过css隐藏动画
 >>> .el-upload-list__item.is-ready,
  >>> .el-upload-list__item.is-uploading {
    display: none !important;
  }