Vue 3 中使用 el-upload 上传文件并获取文件数据

<template>
  <el-form>
    <el-upload
      :action='null'
      :auto-upload='false'
      :file-list='fileList'
      :on-change='handleChange'
    >
      <el-button type='primary'>Click to upload</el-button>
    </el-upload>
    <el-form-item>
      <el-button type='primary' @click='updateOneSection'>Submit</el-button>
      <el-button type='primary' @click='checkForm'>Check</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    // 定义响应式数据
    const fileList = ref([]);
    const formData = reactive({
      // formData中的其他字段
    });

    const handleChange = (file, fileList) => {
      // 更新fileList
      fileList.forEach((file, index) => {
        fileList[index].status = 'ready';
      });
      fileList.value = fileList;
    };

    const updateOneSection = () => {
      // 将fileList中的文件添加到formData中
      fileList.value.forEach((file) => {
        // 将文件添加到formData中
        formData.file = file.raw;
      });
    };

    const checkForm = () => {
      console.log(formData);
    };

    return {
      fileList,
      handleChange,
      updateOneSection,
      checkForm
    };
  }
};
</script>
<p>在这个示例中，我们使用<code>ref</code>函数定义了<code>fileList</code>，并使用<code>reactive</code>函数定义了<code>formData</code>。<code>handleChange</code>函数用于更新<code>fileList</code>，<code>updateOneSection</code>函数将<code>fileList</code>中的文件添加到<code>formData</code>中，<code>checkForm</code>函数用于输出<code>formData</code>的内容。</p>
<p>请注意，这只是一个简单的示例，你可能需要根据你的实际需求进行适当的修改。</p>