el-upload组件上传文件修改文件名--不用FormData

接到这个需求的时候虽然没有做过这个功能但是感觉问题不大，直接就吧需求接下来了，然后试验一遍以后才发现好麻烦啊，还要而且网上几乎都是舍弃upload原有的上传，然后使用FormData调用axios进行上传功能，因为项目比较特殊，调用第三方的接口上传，所以那个方式是不适合我用的，找了一圈才找到不用FormData的方式，也是比较方便的。贴上来记录一下，直接看代码吧

<template>
  <el-upload
    ref='upload'
    drag
    :auto-upload="false"
    action="https://jsonplaceholder.typicode.com/posts/"
    :limit="1"
    :on-change="handleChange">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
<script>
  export default {
    props: {
      //添加文件扩展名
      extendName: {
        type: String,
        default: '.rar'
      }
    },
    data() {
      return {};
    },
    methods: {
      handleChange(file) {
        let fileName = file.name + this.extendName  // 如果可以上传多个文件，这里需要用fileList.forEach()处理
        let f = new File([file.raw],fileName);
        f.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
        file.raw = f;  // 用f替换file的数据
        console.log(file.raw)
        // 这里可以使用这种方式，也可以将这个关闭，添加按钮点击再上传至服务器
        this.$refs.upload.submit(); // 手动触发上传
      },
    }
  }
</script>

下面讲一下代码

1. 首先得关闭组件的自动上传
2. fileName就是我们最终要的文件名，这里的业务需求就是添加一个扩展名
3. f是使用 new File创建的新的文件对象，在创建文件对象的时候给它新名字fileName（刚开始想的是，直接用file.raw.name = fileName 但是结果报错说name是只读属性，不能修改，所以这里使用new File创建新文件，然后整个替换掉raw）
4. 这里的f.uid = file.uid是el-upload底层会用uid去匹配fileList数组中的文件，如果没有这个uid最后匹配返回的null会在底层报错。下面是源码位置：node_modules\element-ui\packages\upload\src\index.vue

    // 匹配
    getFile(rawFile) {
     let fileList = this.uploadFiles;
     let target;
     fileList.every(item => {
       target = rawFile.uid === item.uid ? item : null;
       return !target;
     });
     return target;
   },
   handleProgress(ev, rawFile) {
     const file = this.getFile(rawFile);
     this.onProgress(ev, file, this.uploadFiles);
     // 报错点 null没有status属性
     file.status = 'uploading';
     file.percentage = ev.percent || 0;
   },

5. 更新file.raw为修改文件名后的文件对象
6. 手动调用submit()上传文件

f.uid = file.uid;的时候就可以，但是想要f.type = file.raw.type 的时候同样底层报错。不知道是哪里的原因。有知道的大佬可以在评论区指点一下；