vue3 上传文件重命名

### Vue3 实现文件上传并重命名

为了实现在 Vue3 中上传文件的同时对其进行重命名，可以利用 JavaScript 的 `File` 和 `Blob` API 来创建一个新的带有不同名称的文件对象。下面是一个简单的例子来展示如何在前端处理这一逻辑。

#### 前端部分 (Vue3)

// src/components/FileUpload.vue
<template>
  <div class="upload-section">
    <input type="file" @change="handleFileChange"/>
    <button @click="submitFiles">提交</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const files = ref([]);

function handleFileChange(event) {
  const fileList = event.target.files;
  
  Array.from(fileList).forEach((fileItem, index) => {
    let newFileName = `${Date.now()}-${index}.${getFileExtension(fileItem.name)}`;
    
    // 创建新的 File 对象用于替换原生 fileItem
    const renamedFile = new File([fileItem], newFileName, {type: fileItem.type});
    
    files.value.push(renamedFile);
  });
}

function getFileExtension(fileName){
  return fileName.split('.').pop();
}

async function submitFiles(){
  const formData = new FormData();

  files.value.forEach((file, idx) => {
    formData.append(`files[${idx}]`, file); 
  });

  try{
    await axios.post('/api/upload', formData,{
      headers:{
        "Content-Type": "multipart/form-data"
      }
    });
    console.log("成功上传");
  }catch(error){
    console.error("上传失败", error);
  }
}
</script>

此代码片段展示了如何监听输入框的变化事件 (`@change`) 并通过遍历选中的文件列表来进行逐个重命名的操作。这里使用了当前时间戳加上索引来作为新文件的名字的一部分以确保唯一性[^1]。当点击按钮触发 `submitFiles()` 方法时，则会构建一个表单数据实例并将所有已修改过的文件附加进去准备发送给服务器。

对于后端而言，在接收到请求之后可以根据实际情况保存这些文件，并可能需要调用相应的库或命令完成进一步的任务比如验证、存储等操作。