el-upload 超详细-（附件，图片，多类型文件）玩转上传upload--new FormData()

在使用 el-upload 组件进行文件上传时，可以通过 new FormData() 来构造表单数据，并且可以上传附件、图片以及多种类型的文件。以下是一个简单的例子，展示如何使用 el-upload 结合 new FormData() 来实现文件上传功能：

<template>
  <el-upload
    action="https://your-upload-api.com/upload"
    :on-change="handleChange"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      formData: new FormData()
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 每次选择文件时更新formData
      this.formData.append('file', file.raw);
    },
    submitUpload() {
      const axios = require('axios'); // 需要安装axios
      axios.post('https://your-upload-api.com/upload', this.formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log('上传成功', response);
      })
      .catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个 formData 对象来收集所有要上传的文件。每当用户选择文件时，handleChange 方法会被调用，并将新选择的文件添加到 formData 中。当用户点击上传按钮时，submitUpload 方法会发送一个 POST 请求到服务器，携带 formData 中的所有文件。

注意：

1. 你需要替换 action 属性的 URL 为你的实际上传API地址。
2. 你需要安装 axios 或其他 HTTP 客户端以发送请求。
3. 根据服务器接口的要求，可能需要在请求头中设置 Content-Type 为 multipart/form-data。
4. 如果需要上传其他数据（如表单字段），可以在 formData.append 之后追加相应的键值对。