uniapp在后上传图片

### 实现 UniApp 图片上传功能 在 UniApp 中实现图片上传功能涉及多个方面，包括选择图片、显示已选图片以及实际执行上传操作。 #### 使用 `uni.chooseImage` API 选择图片 为了从用户的设备中选取图片，在应用内可调用 `uni.chooseImage()` 方法。此方法支持配置参数来限定所选图片的数量、尺寸以及其他特性[^1]： ```javascript methods: { onImgsUpload() { uni.chooseImage({ count: 8 - this.gallery.length, sizeType: ['original', 'compressed'], sourceType: ['album'], // 可以设置为['camera'] 或者 ['album'] success(res) { const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); // 更新本地状态中的图片列表 this.gallery.push(...tempFilePaths); }.bind(this), fail(err) { console.error('Failed to choose image:', err); } }); } } ``` 这段代码展示了如何通过点击事件触发图像选择器，并处理成功回调函数内的临时文件路径数组，将其加入到当前组件的状态变量 `gallery` 中以便后续展示或进一步的操作。 #### 显示选定的图片并提供删除选项 对于已经选择了的照片，可以通过遍历存储这些照片链接的数据结构（如上述例子中的 `gallery` 数组），利用 Vue 的模板语法渲染出来。同时给每张图配上一个小图标用于移除对应项[^3]: ```html <template> <view class="upload_info"> <!-- 遍历 gallery 属性 --> <view class="upload_item" v-for="(item, index) of gallery" :key="index"> <image :src="item" mode="aspectFill"></image> <text class="delete" @click="onDeleteImg(index)">×</text> <!-- 删除按钮 --> </view> <!-- 如果还有剩余空间，则显示加号让用户体验继续添加更多图片 --> <view class="upload_item upload_img" @click="onImgsUpload" v-if="gallery.length < 8">+</view> </view> </template> ``` 这里定义了一个简单的布局方案，其中包含了两个主要部分：一个是用来呈现已有图片及其关联的关闭标记；另一个则是当未达到最大限制时给出提示用户可以增加新条目的视觉指示符。 #### 执行图片上传至服务器 完成前端界面的设计之后，下一步就是考虑怎样把这些图片发送出去。这一步骤依赖于具体的业务逻辑和服务端接口设计。一般情况下会采用 HTTP 请求的方式提交数据，而针对二进制形式的大文件则推荐使用 multipart/form-data 编码格式[^2]。 下面是一段简化版的例子说明如何发起 POST 请求向远程服务传递单个文件对象: ```javascript async function uploadImages(filePaths){ try{ let result = await Promise.all( filePaths.map(path => new Promise((resolve,reject)=>{ uni.uploadFile({ url:'https://example.com/upload', filePath:path, name:'file', formData:{'user':'test'}, success:(res)=>{ resolve(JSON.parse(res.data)); }, fail:(err)=> { reject(err);} }) })) ); console.log(result); }catch(error){ console.error("Error during uploading files:",error); } } // 调用这个函数传入要上传的所有文件路径即可启动批量上传过程 uploadImages(gallery); ``` 以上代码片段实现了异步地将多张图片逐一上传的功能，并且能够接收来自服务器返回的结果信息。需要注意的是这里的 URL 地址应当替换为目标系统的实际地址。