在ElementUi中使用原生多选图片上传

通过el-botton 传递事件给隐藏的input

 <el-button size="small" type="primary" @click="handleChange(false)">选择上传文件</el-button>


<input v-show="false" ref="fileRef" multiple="multiple"  type="file" 
accept="image/*"
@change="fileChange" >

// 创建一个点击事件
 handleChange(e) {
      this.type = e;
      this.$refs.fileRef.dispatchEvent(new MouseEvent('click'));
 },

//上传事件
//imgUpload 图片上传接口
//photoMasterImg 主图接口
//photoAlbum  相册接口
async upLoader(file) {
        let subFunc = null;
        let options = null;
        const arr = [];
        for (let i = 0; i < file.length; i++) {
            const formData = new FormData();
            formData.append('file', file[i]);
            const data = formData;
            arr.push(imgUpload(data));
        }
        Promise.all(arr).then(async (data) => {
            const file = data.map((e) => {
                return {
                    businessId: this.id,
                    fileName: e.data.fileName,
                    fileUrl: e.data.completeFileOssPath
                };
            });
            if (!this.type) {
                subFunc = photoMasterImg;
                options = file[0];
            } else {
                subFunc = photoAlbum;
                options = file;
            }
            const res1 = await subFunc(options);
            if (res1.code === 200) this.getPhotoAll();
        });
    }



//事件完成
fileChange(e) {
      try {
        const files = e.target.files || e.dataTransfer.files;
        this.upLoader(files);
      } catch (error) {
        this.$message({
          message: '上传失败',
          type: 'error'
        });
      }
},