重构文件上传行为

目标：将 [前端 → 后端] 改成 [前端 → 中间层 → 后端]

第一步：自定义上传行为（ElementPlus）

<template><el-uploadaction=""show-file-listv-model:file-list="fileList":on-change="handleChange":on-success="handleSuccess":on-error="handleError":http-request="httpRequest"><el-button type="primary">Click to upload</el-button></el-upload>
</template><script setup>
import { ref } from 'vue';const fileList = ref([]);const handleChange = () => {fileList.value = fileList.value.slice(-1);
};const httpRequest = async (item) => {const formData = new FormData();formData.append('data', item.file);formData.append('type', 'cdoShelf');const res = await fetch('http://127.0.0.1:8360/upload', {method: 'POST',body: formData,});console.log('[res]:', res);
};const handleSuccess = (...args) => {console.log('handleSuccess', args);
};const handleError = (...args) => {console.log('handleError', args);
};
</script>

要点 1：使用 http-request 自定义 el-upload 的上传行为
要点 2：POST 请求的数据格式为 FormData
要点 3：文件以 File 对象的形式传递

第二步：中间层转发（ThinkJS）

const axios = require('axios');
const fs = require('fs');
const FormData = require('form-data');module.exports = class extends think.Controller {async postAction() {const data = this.post(); // 获取 body 参数const file = this.file(); // 获取文件console.log('[data]:', data);console.log('[file]:', file);const formData = new FormData();formData.append('file', fs.createReadStream(file.data.path));formData.append('type', data.type);const res = await axios({method: 'post',url: '后端的上传接口',data: formData,}).then(function (response) {think.logger.info('response-data', response.data);return response.data;}).catch(function (error) {think.logger.error('error', error);return Promise.reject(error);});console.log('[res]:', res);}
};