【element ui】el-upload的上传多张图片各种踩坑细节总结

本文链接：https://blog.csdn.net/Gu_fengqi/article/details/124468621

项目场景：

项目场景：在需要上传图片的一些项目中，我们可能会遇到需要上传多张图片，并且上传后要把上传的加号隐藏以及上传多张图片的存放问题（存放可能是最头疼的），把多张图片的
地址存到一个数组里面。

问题描述

上传多张隐藏加号和地址接收问题

1111
例如：上传了五张图片后，后面的+号就不显示了。

 <el-form-item label="其它图片" prop="otherImg">
   <el-upload
            ref="upload1"  
            :class="{'hide':hideUploadAdd}"  //隐藏+号
            :action="field101Action"     //上传的接口
            list-type="picture-card"
            multiple
            :file-list="fileListUrl1"  //接收传入图片地址的数组
            :on-change="handleAddChange"
            :on-success="uploadSuccess1"
            :before-upload="field101BeforeUpload1"
            :on-preview="handlePictureCardPreview1"
            :limit="5"         //限制上传个数
            :on-remove="handleRemove1">
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">（请上传5张长宽1:1的图片，每张大小不超过2M）</div>
          </el-upload>
          //这是图片预览放大用的
          <el-dialog :visible.sync="dialogVisible1">
         	<img width="100%" :src="dialogImageUrl1" alt="">
          </el-dialog>
        </el-form-item>

定义data里面的数据：

  data() {
      return {
        //上传展示图片数组
        fileListUrl1:[],
        //是否隐藏+号
        hideUploadAdd:false,
        //上传接口（根据自己的接口来）
        field101Action: process.env.VUE_APP_BASE_API+"/1111/upload",
        //预览图片
        dialogImageUrl1: '',
        dialogVisible1: false,
	 }
  },
   methods: {
      // 表单重置
      reset() {
        this.fileListUrl1 = [];   //注意重置一下
        this.dialogImageUrl1 = '';
      }
       /** 图片上传 */
      uploadSuccess1(res){
        this.fileListUrl1.push(res.data.url)  //这里直接push会报错，但是改的话就不能把图片存成数组形式了，我还没有找到好的办法，所以只能先这样把功能实现了
        this.form.otherImg = this.fileListUrl1.toString()    //把上传的图片转换成数组形式存在数据库的other_img字段里面
      },
      /** 改变函数 */
      handleAddChange(file, fileList) {
        //如果图片超过五张，则不显示+号
        if (fileList.length >= 5) {
        this.hideUploadAdd = true;
        }
      },
      field101BeforeUpload1(file) {
        //限制图片大小不超过2MB
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        //判断尺寸大小
        const isSize = new Promise(function (resolve, reject) {
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {
            let valid = img.width / img.height === 1;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message.error({
              message:'上传的图片尺寸比例应为1：1，请重新上传'
            });
            return Promise.reject();
            return false;
          }
        )
        return isRightSize && isAccept && isSize
      },
      handleRemove1(file, fileList) {
        //删除图片的时候也要判断一下
        if (fileList.length < 5) {
          this.hideUploadAdd = false;
        }
      },
      handlePictureCardPreview1(file) {
        this.dialogImageUrl1 = file.url;
        this.dialogVisible1 = true;
      },
   }