### 使用 FormData 在 UniApp 中实现图片上传 在 UniApp 中，可以通过 `FormData` 对象来构建表单数据并将其发送到服务器。这允许开发者更灵活地处理文件和其他表单字段的同时提交。 #### 创建页面结构 为了实现这一功能，在页面中添加一个按钮用于触发图片选择操作，并准备一个 `<image>` 组件用来展示所选中的图片： ```html <template> <view> <!-- 图片上传按钮 --> <button type="primary" @click="chooseImage">点击上传</button> <!-- 预览已上传的图片 --> <image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image> </view> </template> ``` #### 编写 JavaScript 方法 接下来定义两个主要的方法：一个是负责调用 API 来选取图片；另一个则是利用 `FormData` 构建请求体并将图片上传至服务器。 ```javascript <script> export default { data() { return { imageUrl: '' }; }, methods: { async chooseImage() { const res = await uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'] }); this.imageUrl = res.tempFilePaths[0]; await this.uploadImage(res.tempFilePaths[0]); }, uploadImage(filePath) { let formData = new FormData(); formData.append('file', { uri: filePath }); uni.request({ url: 'https://example.com/upload', method: 'POST', header: { 'content-type': 'multipart/form-data' }, data: formData, success(response) { console.log('Upload Success:', response.data); }, fail(error) { console.error('Upload Failed:', error); } }); } } }; </script> ``` 这段代码展示了如何创建一个简单的界面让用户可以选择一张照片并通过 `FormData` 将其作为 multipart 请求的一部分发送给远程服务[^1]。注意这里的 URL `'https://example.com/upload'` 应替换为实际的服务端接口地址。