elementplus的upload表格文件上传form-data格式

Element Plus是一个基于Vue.js的开源UI组件库，它提供了丰富的表单组件，包括文件上传功能。在Element Plus的`el-upload`组件中，处理表格文件上传通常会涉及到将数据转换成`FormData`格式。

当你需要在表格单元格内上传文件时，可以按照以下步骤操作：

1. 创建一个`el-form-item`元素，其中包含`el-upload`组件：

<template>
  <el-table :data="tableData">
    <el-table-column prop="fileName" label="文件名"></el-table-column>
    <el-table-column prop="action" label="操作">
      <template slot-scope="scope">
        <el-upload
          action="你的服务器API地址"
          :file-list="scope.row.fileList"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-upload"></i> 选择文件
        </el-upload>
      </template>
    </el-table-column>
  </el-table>
</template>

2. 初始化状态并处理上传相关的事件：

<script>
export default {
  data() {
    return {
      tableData: [
        // 假设这是表格的数据结构，包含fileList属性
      ],
      fileList: [], // 存储当前选中的文件列表
    };
  },
  methods: {
    handleFileChange(file) {
      this.fileList.push(file);
      const formData = new FormData(); // 创建FormData实例
      formData.append('file', file); // 添加文件到FormData
      this.uploadFile(formData); // 调用实际的上传函数
    },
    handleFileRemove(file) {
      // 删除文件列表中的项，并从formData中移除对应文件
      this.fileList.splice(this.fileList.findIndex(f => f.name === file.name), 1);
      if (this.formData && this.formData.has(file)) {
        this.formData.delete(file);
      }
    },
    beforeUpload(file) {
      // 在上传前进行验证或处理
      return true; // 返回true默认允许上传
    },
    uploadFile(formData) {
      // 发送POST请求到服务器，携带FormData数据
      axios.post('/api/upload', formData).then(response => {
        // 处理服务器响应
      });
    },
  },
};
</script>

在这个例子中，`handleFileChange`方法用于更新文件列表并将文件添加到`FormData`中，`beforeUpload`可以添加自定义验证逻辑，而`uploadFile`则负责发起实际的HTTP请求，将`FormData`作为数据体发送给服务器。