uni-app/vue3的图片上传功能

1.静态页面的书写!-- 4.修复实拍照片 -- view classform-item text classlabel修复实拍照片/text view classupload-wrap button classupload-btn clickchooseRepairImg上传照片最多3张/button scroll-view scroll-x classimg-scroll v-ifrepairImgList.length 0 view classimg-item v-for(img, idx) in repairImgList :keyidx image :srcimg.address classpreview-img modeaspectFill/image text classdel-img clickdelRepairImg(img.id,idx)×/text /view /scroll-view /view /view2.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() } }