1.静态页面的书写
<!-- 4.修复实拍照片 --> <view class="form-item"> <text class="label">修复实拍照片</text> <view class="upload-wrap"> <button class="upload-btn" @click="chooseRepairImg">上传照片（最多3张）</button> <scroll-view scroll-x class="img-scroll" v-if="repairImgList.length > 0"> <view class="img-item" v-for="(img, idx) in repairImgList" :key="idx"> <image :src="img.address" class="preview-img" mode="aspectFill"></image> <text class="del-img" @click="delRepairImg(img.id,idx)">×</text> </view> </scroll-view> </view> </view>2.script里逻辑的书写
1.首先要定义一个存储图片的数组
const repairImgList = ref([]) // 修复实拍2.然后书写选择图片上传的函数
const chooseRepairImg = () => { uni.chooseImage({ count: 3, sizeType: ['compressed'], //使用的是压缩的图片 quality: 60, sourceType: ['camera', 'album'], //图片的来源，相机或者相册 success: res => { repairImgList.value = [...repairImgList.value, ...res.tempFilePaths] } }) }3.写上删除图片的逻辑，根据图片数组里的图片的id删除图片
const delRepairImg = async (id, idx) => { const res = await uni.$http.put(`/take/delectImgTest?id=${id}`) console.log("删除接口测试", res) repairImgList.value.splice(idx, 1) }4.然后开始上传图片的工作，因为这里面的请求是独立于全局的拦截器，相应器和http请求的，所以要重新去写请求携带的token,baseUrl等设置，id是后端请求的参数，在formData里面
const uploadSingleImg = (filePath) => { const token = uni.getStorageSync('token') const baseUrl = uni.$http.baseUrl const id = props.item.id return new Promise((resolve, reject) => { uni.uploadFile({ url: `${baseUrl}/take/uploadImgs`, filePath, name: 'files', header: { Authorization: token, Token: token }, formData: { id: String(id) }, success: res => { try { const data = JSON.parse(res.data) if (data.code === 200 && Array.isArray(data.data) && data.data.length) { resolve(data.data[0]) } else reject('上传未返回图片地址') } catch (err) { reject('接口返回格式错误') } }, fail: err => reject(err.errMsg) }) }) }5.因为一次性可能传多张图片，所以可能要进行图片的批量上传，参数是图片数组，在这里循环调用单张图片上传的逻辑
// 批量上传一组图片 const uploadImgGroup = async (tempList) => { const urls = [] for (const path of tempList) { urls.push(await uploadSingleImg(path)) } return urls }3.后言（可能需要）
因为我做的是一个弹窗组件，可能会将信息传给父组件使用，所以这个提交按钮可能会需要
// 提交：上传图片，整合所有数据抛出给父组件 const handleSubmit = async () => { uni.showLoading({ title: '提交中...' }) try { // 分别上传修复、测试图片 const repairImgs = await uploadImgGroup(repairImgList.value) // 传给父组件完整结构 emit('submit', { repairImgs, // 修复实拍线上图数组 }) } catch (err) { uni.showToast({ title: err, icon: 'none' }) } finally { uni.hideLoading() } }
