当前位置：首页 > article >正文

【使用 Element UI 实现手动上传文件：FormData 追加文件和其他参数，支持单文件覆盖上传】

article 2025/3/18 15:27:12

在开发 Web 应用时，文件上传是一个常见的需求。Element UI 提供了强大的 el-upload 组件，可以轻松实现文件上传功能。本文将详细介绍如何使用 Element UI 实现以下功能：

手动触发文件上传：用户选择文件后，点击按钮手动上传。
使用 FormData 追加文件和其他参数：将文件和其他表单数据一起提交。
单文件覆盖上传：只允许上传一个文件，新文件会覆盖旧文件。

1. 实现思路

为了实现上述功能，我们需要以下几个步骤：

禁用自动上传：通过 auto-upload="false" 关闭自动上传。
手动触发上传：通过 ref 获取 el-upload 实例，调用 submit 方法手动上传。
使用 FormData 追加文件和其他参数：在自定义上传逻辑中，将文件和其他参数添加到 FormData 中。
单文件覆盖上传：通过 limit="1" 限制文件数量，并在 on-change 事件中处理文件覆盖逻辑。

2. 完整代码实现

以下是完整的代码实现：

<template>
  <div>
    <!-- 文件上传组件 -->
    <el-upload
      ref="upload"
      action="#"  <!-- action 留空，因为会覆盖上传逻辑 -->
      :limit="1"  <!-- 限制只能上传一个文件 -->
      :auto-upload="false"  <!-- 关闭自动上传 -->
      :file-list="fileList"
      :on-change="handleFileChange"
      :on-exceed="handleFileExceed"
      :http-request="customUpload"  <!-- 自定义上传逻辑 -->
    >
      <el-button slot="trigger">选择文件</el-button>
    </el-upload>

    <!-- 输入其他参数 -->
    <el-input v-model="params.userId" placeholder="用户ID"></el-input>
    <el-input v-model="params.desc" placeholder="文件描述"></el-input>

    <!-- 手动上传按钮 -->
    <el-button @click="handleManualUpload">上传文件</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],  // 文件列表
      params: {      // 其他参数
        userId: '',
        desc: ''
      }
    };
  },
  methods: {
    // 手动触发上传
    handleManualUpload() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择文件');
        return;
      }
      this.$refs.upload.submit();  // 调用 submit 触发自定义上传
    },

    // 文件选择变化时的回调
    handleFileChange(file, fileList) {
      // 始终保持只有一个文件
      if (fileList.length > 1) {
        this.fileList = [fileList[fileList.length - 1]];  // 只保留最新文件
      } else {
        this.fileList = fileList;
      }
    },

    // 文件超限时的回调
    handleFileExceed() {
      this.$message.warning('只能上传一个文件，新文件将覆盖旧文件');
    },

    // 自定义上传逻辑
    async customUpload(options) {
      const { file } = options;  // 获取文件对象

      // 创建 FormData
      const formData = new FormData();
      formData.append('file', file);  // 追加文件
      formData.append('userId', this.params.userId);  // 追加其他参数
      formData.append('desc', this.params.desc);

      try {
        // 发送请求
        const res = await axios.post('https://your-api.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'  // 必须设置
          }
        });

        // 处理成功
        this.$message.success('上传成功');
        this.fileList = [];  // 清空文件列表
      } catch (error) {
        // 处理失败
        this.$message.error('上传失败');
      }
    }
  }
};
</script>

<style scoped>
/* 样式调整 */
.el-input {
  margin-bottom: 10px;
}
</style>

运行 HTML