vue如何在表格中每一行都添加文件，使用formdata手动上传

在Vue.js中，在表格中为每一行添加文件并使用`FormData`手动上传，你可以按照以下步骤操作：

1. 首先，创建一个包含文件选择按钮的模板组件，例如在`.vue`文件中：

<template>
  <tr v-for="(item, index) in items" :key="index">
    <td>
      <input type="file" @change="handleFileChange(index)">
    </td>
    <td>
      <button @click="uploadFile(index)">上传</button>
    </td>
  </tr>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 初始化数据数组，每个元素对应表格一行
    };
  },
  methods: {
    handleFileChange(index) {
      const file = event.target.files[0];
      this.items[index].file = file; // 将选中的文件保存到当前行的数据中
    },
    uploadFile(index) {
      const formData = new FormData();
      formData.append('file', this.items[index].file); // 添加文件到FormData

      // 这里需要你处理实际的上传逻辑，可以发送axios请求，或者直接通过`URL.createObjectURL()`预览等
      fetchUploadAPI(formData, index);
    },
    fetchUploadAPI(formData, index) {
      // 在这里替换为你的实际上传函数
      // axios.post('/api/upload', formData)
      //   .then(response => {
      //     console.log(response);
      //     // 处理上传成功后的回调
      //   })
      //   .catch(error => {
      //     console.error(error);
      //     // 错误处理
      //   });
    }
  }
};
</script>

2. `fetchUploadAPI` 函数是实际的上传处理部分，你需要根据项目需求（如后端API、库等）填写这部分内容。

**注意事项：**
- 确保在服务器端支持接收`FormData`类型的上传，并配置好相应的路由和验证。
- 为了安全，最好在用户真正点击上传之前限制表单提交，比如加上一个阻止默认事件的处理。