element-图片文件上传，多图合并请求（各种踩坑）

更好方案是前端上传到七牛云的，后端做压缩很浪费性能

前端上传文件/图片到七牛云

先上图

1. 认识属性:file-list=“fileList”
   上传的话选中文件后，会加载到页面中供我们预览。这个属性就是存预览的照片数组的。（你不配置这属性，当然也能看到预览，但是你无法对其进行操作，比如删除）

2. auto-upload=“false” 选中文件后是否直接上传。记住这个很重要，文档几乎不提

3. on-change 官方解释“文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用”，当你添加文件也会调用，使用这个的时候，记得把第二点属性设置成false，记得把预览数组赋值到本地fileList变量，这样才能操作预览
   图片

           this.fileList=fileList
          } ```
   

4. ref=“upload” 然后是注册实例，添加好文件后总得上传吧，官方没写上传的方法。。。。 this.$refs.upload.submit(); 这样就行了

5. 然后是做一个删除某个预览图片，真的想吐槽官方文档，必须用到第一点的属性，去操作那个fileList 再然后，如图能看到一个删除按钮，点击是没有参数返回数组下标的。那么就意味着你得循环这个fileList去匹配该file

         let index=0
         //没有提供下标值，使用uid识别
         fileList.forEach((el,idx) => {
           if(el.uid==file.uid) {
             index=idx
           }
         });
         this.fileList.splice(index,1)
         console.log(this.fileList)
       },
       
   

6. 不符合限制的图片，不加入预览（不添加），这是onchange函数的内容，fileList是参数，并不是本地变量。

beforeonchange(file,fileList) {
        this.fileList=fileList
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024  < 500;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 500KB');
          fileList.pop(0,fileList.length-1)
        }
    },

7. 回显，使用了手动上传你会发现，没上传之前也能正常显示。你打印一下fileList，发现是

[ { "status": "ready", "name": "22222.png", "size": 159646, "percentage": 0, "uid": 1608627375006, "raw": { "uid": 1608627375006 }, "url": "blob:http://127.0.0.1:8801/39afb095-4e76-4dc1-964a-d7cb70ddadba" } ]

而不是传统的一个url地址，回显时候怎么办呢？
其实你重新赋值一下:file-list=“fileList” 就能显示了，并且可以正常的查看大图、删除

 fileList ：[{url:' 回显url '} ]           //uid不用管，你操作过后系统会自动加上

|

|

|

|

一次请求，多图合并上传！！！！！！！！

最终效果图，formdata中有三个file(key指是自定义的，比如我的files)

• 配置中的aciton没用了，因为我们用手动上传
• :http-request=“uploadFile” 使用这个覆盖默认行为（这官网介绍真的是****），说白了就是 this.$refs.upload.submit()
  被替换成了uploadFile，运行前者代码=触发uploadFile函数。你在后者里面写ajax、axios这些，就是所谓的覆盖默认上传。
• 重点来了。就是新建一个formData，你可以理解为js层面生成了一个表单。你往里面append内容，最后提交表单。
• 假如你上传3张图片，那么执行this.$refs.upload.submit() 时候=执行三次uploadFile，往里面append三个东西
• 后端适配就好了，表单形式提交。
• 我的代码中params是用来提供id给后端做id和图片的关联的

	uploadFile(file) {
      this.formDate.append('files', file.file);
    },
    uploadimg(data) {
      this.formDate = new FormData()
        this.$refs.upload.submit()  //开始遍历
        let url=process.env.BASE_API+'/xxxx/remarkUploadImg'
        axios({
          method: 'post',
          url:url,
          withCredentials: true,
          data:this.formDate,
          params:{remarkId:data},
          headers:{"Content-Type": "multipart/form-data"}
        }).then(res=> {
          this.$refs.upload.clearFiles() 

        })
    },

小知识，这文件大小是用字节表示的