### Vue 使用原生 Input 和 FormData 实现照片上传 在 Vue 中，可以通过原生 `<input>` 元素结合 `FormData` 对象实现照片上传功能。以下是详细的实现过程： --- #### HTML 结构 定义一个隐藏的 `<input type="file">` 元素用于选择文件，并绑定事件监听器以捕获用户选择的照片。 ```html <template> <div> <!-- 触发文件选择 --> <button @click="chooseFile()">选择照片</button> <!-- 隐藏的 file 输入框 --> <input type="file" ref="uploadInput" style="display: none;" @change="handleFileChange($event)" accept="image/*" /> </div> </template> ``` - `@click="chooseFile()"`：触发文件选择对话框。 - `ref="uploadInput"`：通过 `$refs` 访问 DOM 元素。 - `style="display: none;"`：隐藏输入框。 - `@change="handleFileChange($event)"`：监听文件变化事件。 - `accept="image/*"`：限制只允许选择图片类型的文件。 --- #### JavaScript 实现逻辑 在 Vue 组件的方法中，分别实现文件选择、文件处理以及上传逻辑。 ```javascript <script> export default { data() { return { selectedFile: null, // 存储选中的文件 }; }, methods: { /** * 手动触发展示文件选择对话框 */ chooseFile() { this.$refs.uploadInput.click(); // 触发隐藏的 input[type="file"] 点击事件 }, /** * 处理文件选择后的 change 事件 * @param {Event} event - 文件选择事件 */ handleFileChange(event) { const files = event.target.files; if (files.length === 0) { console.warn("未选择任何文件"); return; } this.selectedFile = files[0]; // 获取第一个文件 console.log("选定的文件:", this.selectedFile); this.uploadPhoto(); // 自动执行上传操作 }, /** * 使用 FormData 上传照片到服务器 */ uploadPhoto() { if (!this.selectedFile) { console.error("尚未选择文件"); return; } const formData = new FormData(); formData.append("photo", this.selectedFile); // 添加文件到 formData，键名为 "photo" // 设置请求头（通常不需要手动设置 Content-Type） this.$http.post("/api/upload-photo", formData, { headers: { "Content-Type": "multipart/form-data", }, }) .then((response) => { console.log("上传成功:", response.data); }) .catch((error) => { console.error("上传失败:", error); }); }, }, }; </script> ``` --- ### 关键点说明 1. **文件选择** 用户点击按钮时，通过 `$refs.uploadInput.click()` 手动触发展示文件选择对话框[^4]。 2. **文件处理** 当用户选择了文件后，`@change` 事件会被触发，此时可以从 `event.target.files` 中获取所选文件列表[^3]。 3. **FormData 构造** 创建一个新的 `FormData` 对象，并使用 `append(key, value)` 方法将文件附加进去。这里的键名 `"photo"` 应与后端接口预期的参数名称一致[^2]。 4. **HTTP 请求** 利用 Axios 或其他 HTTP 工具发送 POST 请求，将 `FormData` 作为请求体传递给后端服务。需要注意的是，大多数情况下无需显式指定 `Content-Type`，因为它会自动根据 `FormData` 的内容动态生成[^5]。 --- ### 注意事项 - **兼容性** 确保浏览器支持 `FormData` API 和 `input[type="file"]` 功能。现代主流浏览器均已全面支持这些特性[^1]。 - **安全性** 后端应对上传的文件进行严格校验，防止恶意文件攻击或非法扩展名上传。 - **用户体验优化** 提供实时预览功能，让用户确认即将上传的照片；同时显示进度条提升交互体验。 ---