vue3+ts 使用formdata的append方法 后端接收不到参数

### 实现Vue 3 和 TypeScript 中的表单直接上传文件到后端 在 Vue 3 和 TypeScript 的环境中实现文件上传功能涉及前端和后端两部分的工作。下面展示的是如何通过 HTML 表单以及 Axios 库来发送文件至服务器。 #### 创建HTML 文件输入组件 为了允许用户选择要上传的文件，在模板内定义一个 `<input>` 元素，其 `type` 属性设置为 `"file"`： ```html <template> <div class="upload-section"> <form @submit.prevent="handleSubmit()"> <label for="fileInput">Choose File</label> <input id="fileInput" type="file" ref="fileInputRef" /> <button type="submit">Upload</button> </form> </div> </template> ``` #### 处理文件提交逻辑 接下来编写处理函数用于捕获并准备所选中的文件对象以便于后续传输给后台服务。这里会用到 JavaScript 的 FormData API 来封装待发的数据包。 ```typescript <script lang="ts"> import { defineComponent, ref } from 'vue'; import axios from 'axios'; export default defineComponent({ name: "FileUploader", setup() { const fileInputRef = ref<HTMLInputElement | null>(null); async function handleSubmit(): Promise<void> { if (!fileInputRef.value?.files || fileInputRef.value.files.length === 0) return; let formData = new FormData(); Array.from(fileInputRef.value.files).forEach((file, index) => { formData.append(`files[${index}]`, file); }); try { await axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }); console.log('Files uploaded successfully'); } catch(error){ console.error('There was an error uploading the files!', error); } } return { fileInputRef, handleSubmit }; }, }); </script> ``` 此代码片段展示了怎样获取由用户挑选出来的文件列表，并将其加入到一个新的 `FormData` 对象里；之后再调用 Axios 发起 POST 请求向指定 URL (`/api/upload`) 提交这些数据[^1]。 请注意实际开发过程中应当替换 `/api/upload` 成真实的API路径，并确保该接口能够接收 multipart/form-data 类型的内容。另外还需要考虑安全性方面的问题比如验证请求合法性、防止恶意攻击等措施[^2]。

### 使用Vue3和TypeScript实现头像上传 为了在Vue3项目中使用TypeScript实现头像上传功能，可以基于Element Plus库中的`<el-upload>`组件构建。下面是一个完整的示例，展示了如何创建一个允许用户上传图片并显示预览的功能。 #### 组件模板部分 HTML结构定义了一个用于触发文件选择对话框的按钮以及用来展示已选图像缩略图的位置： ```html <template> <div class="upload-container"> <!-- 头像上传 --> <el-upload ref="uploadRef" class="avatar-uploader" :action="''" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="customUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <el-icon v-else><Plus /></el-icon> </el-upload> <!-- 预览弹窗 --> <el-dialog v-model="dialogVisible" title="预览"> <img :src="dialogImageUrl" alt="" style="width: 100%" /> </el-dialog> </div> </template> ``` 此段代码利用了自定义上传逻辑代替默认行为，并通过`:before-upload`属性指定前置处理函数，在实际发送请求前验证文件合法性[^2]。 #### 脚本部分 接下来是脚本区域，包含了必要的导入语句、响应式状态声明及其变更方法等： ```typescript <script setup lang="ts"> import { ref } from 'vue'; import type { UploadProps, UploadRawFile, UploadRequestOptions } from 'element-plus'; const imageUrl = ref(''); const dialogImageUrl = ref(''); const dialogVisible = ref(false); const uploadRef = ref(); // 文件上传之前的钩子函数 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => { if (!rawFile.type.includes('image/')) { ElMessage.error('仅支持上传图片!'); return false; } if (rawFile.size / 1024 / 1024 > 2) { ElMessage.error('图片大小不得超过2MB!'); return false; } // 显示本地预览 const reader = new FileReader(); reader.onloadend = () => { imageUrl.value = String(reader.result); // 更新预览链接 }; reader.readAsDataURL(rawFile); return true; }; // 自定义上传方法 async function customUpload(options: UploadRequestOptions): Promise<void> { const formData = new FormData(); formData.append('file', options.file as File); try { // 这里应该替换为真实的API地址 await fetch('/api/upload', { method: 'POST', body: formData, }); ElMessage.success('上传成功'); } catch (error) { ElMessage.error('上传失败'); } finally { uploadRef.value?.clearFiles(); // 清除已上传列表项 } } // 图片点击事件处理器 function handlePictureCardPreview(file: UploadRawFile) { dialogImageUrl.value = URL.createObjectURL(file.raw!); dialogVisible.value = true; } </script> ``` 上述代码实现了基本的表单校验与异步提交流程，同时也提供了错误提示机制以增强用户体验。