el-upload 异步上传

### 使用 `el-upload` 组件实现文件异步上传

为了利用 Element UI 的 `el-upload` 组件完成文件的异步上传，可以遵循特定配置和编程实践。组件本身提供了多种属性用于控制其行为，如设置上传目标 URL 和自定义上传逻辑。

#### 配置 `action` 属性指定上传地址

`el-upload` 提供了 `action` 属性来设定服务器端接收上传文件的位置。当用户选择文件并确认上传时，默认情况下会向该路径发起 POST 请求[^1]。

<el-upload action="https://jsonplaceholder.typicode.com/posts/">
  <button slot="trigger">选取文件</button>
</el-upload>

#### 自定义上传过程处理函数

如果希望更灵活地管理上传流程，则可以通过提供 `http-request` 方法来自定义整个上传请求的过程。这允许开发者完全掌控发送给服务端的内容以及如何响应返回的结果[^2]。

const customUpload = (options) => {
    const formData = new FormData();
    formData.append('file', options.file);

    axios({
        method: 'POST',
        url: '/your/upload/url',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'}
    }).then((res)=>{
        // 处理成功的回调
        console.log(res);
        options.onSuccess && options.onSuccess(res);
    }).catch((err)=>{
        // 错误处理
        console.error(err);
        options.onError && options.onError(err);
    });
};

#### 结合表单其他字段一起提交

有时除了文件外还需要一同传递额外的信息至服务器，在这种场景下可借助 JavaScript 创建 `FormData` 对象收集所有待传参数，并通过 Axios 或者原生 Fetch API 发送完整的表单数据。

<!-- HTML部分 -->
<el-form ref="formRef" :model="formData">
  <!-- 表单项... -->
  <el-upload v-model="formData.files" :before-upload="handleBeforeUpload"></el-upload>
  <el-button type="primary" @click="submitForm()">提交</el-button>
</el-form>

<script setup lang="ts">
import { reactive } from "vue";

let formData = reactive({ name: "", files: null });

function handleBeforeUpload(file){
  this.formData.files = file;
}

async function submitForm(){
  let formDatas = new FormData();

  Object.keys(formData).forEach(key=>{
      if(Array.isArray(formData[key])){
          formData[key].forEach(item=>formDatas.append(`${key}[]`, item));
      }else{
          formDatas.append(key, formData[key]);
      }
  });

  try {
      await axios.post('/api/upload', formDatas,{
          headers:{'Content-Type':'multipart/form-data'}
      });
      alert("上传成功！");
  } catch(e){console.error(e);}
}
</script>