### 使用 uView2 在小程序中实现 multipart/form-data 图片上传 在开发微信小程序时，使用 `uView2` UI框架可以简化许多操作。对于文件上传功能而言，特别是采用 `multipart/form-data` 形式的图片上传，可以通过如下方式来完成。 #### 创建页面结构 首先定义好页面的基础布局，在此部分会涉及到模板中的视图组件设置： ```html <template> <view class="container"> <!-- 文件选择器 --> <picker mode="image" @change="chooseImage"> <button type="primary">选择图片</button> </picker> <!-- 显示已选图片 --> <block v-for="(item, index) in imgList" :key="index"> <image :src="item"></image> </block> <!-- 提交按钮 --> <button type="warn" @click="uploadImages">上传图片</button> </view> </template> ``` #### 编写脚本逻辑 接着是在 `<script>` 部分编写处理函数，用于管理用户的交互行为并执行实际的上传请求： ```javascript <script> export default { data() { return { imgList: [], // 存储用户选取的图片路径数组 }; }, methods: { chooseImage(e) { const tempFilePaths = e.detail.tempFilePaths; this.imgList.push(...tempFilePaths); }, async uploadImages() { wx.showLoading({ title: '正在上传...', }); try { for (let i = 0; i < this.imgList.length; ++i) { await new Promise((resolve, reject) => { wx.uploadFile({ url: 'https://example.com/upload', // 替换成自己的服务器地址[^1] filePath: this.imgList[i], name: 'file', formData: {}, // 如果有额外参数可在此处添加 success(res) { console.log('Upload Success:', res.data); resolve(); }, fail(err) { console.error('Upload Failed:', err); reject(err); } }); }); } wx.showToast({ icon: "success", title: "上传成功" }); } catch (error) { wx.showToast({ icon: "none", title: "上传失败：" + error.message, }); } finally { wx.hideLoading(); } } } } </script> ``` 注意这里的 `url` 字段应该指向后端提供用来接收文件的服务接口。上述代码片段展示了如何利用 `wx.uploadFile()` API 来发送带有边界字符串（boundary string）的数据流给指定 URL 地址。 #### 设置样式 最后简单地为界面元素加上一些基本样式以改善用户体验： ```css <style scoped lang="scss"> .container { padding: 20rpx; button { margin-bottom: 20rpx; } image { width: 100%; height: auto; } } </style> ``` 以上就是基于 `uView2` 实现的小程序内多张图片批量上传至服务器的方法介绍。需要注意的是，当向服务器提交数据时，默认情况下浏览器或客户端工具会自动创建合适的 boundary 值作为消息体的一部分；因此通常不需要手动指定这个值除非特别需求。