前端在上传文件时，修改文件名称

在一些特定的使用场景中，可能会需要前端在上传文件时修改文件的名称之后再传给后端，而文件名在创建对象时确定，‌并且不可更改。‌若需“修改”文件名，‌实际上是需要创建一个新的file对象，‌指向新的文件名，‌或者对文件系统进行操作以重命名文件。‌

以下是创建新的file对象方法：

1.首先在模板中添加上传文件组件：

 <a-upload class="upload" :auto-upload="false" v-model="files" @change="filesChange" :show-retry-button="false">
   <template #upload-button>
      <a-button type="outline" size="mini"> 上传附件 </a-button>
   </template>
 </a-upload>

2.上传文件组件绑定change事件，在方法中修改文件名称

const filesChange = (e: any) => {
  let files: any[] = []
  e.map((item: any) => {
    const fileNew = new File([item.file], '吃啥'+item.file.name, { type: item.file.type })
    files.push(fileNew)
  })
  console.log(files);
}

 

可以看到，上传的文件名已经修改，只需要把修改后的file对象传给后端就可以了