uni.chooseimage 获得图片之后，怎么上传

### 使用 `uni.uploadFile` 上传图片时获取图片文件大小 当使用 `uni.uploadFile` 方法上传图片时，可以通过访问 `_FILES` 数组中的 `size` 属性来获取文件大小。此属性表示已上传文件的大小，单位为字节。 在 PHP 后端处理部分，可以在接收到文件之后立即读取该属性： ```php $fileSize = $_FILES['file']['size']; // 获取文件大小，单位为字节 echo "The file size is {$fileSize} bytes."; ``` 对于前端开发，在调用 `uni.uploadFile()` 函数之前，可以先通过 `<input type="file">` 或者 UniApp 提供的 `<uni-file-picker>` 组件选择文件并预览其基本信息，包括文件大小。例如，利用 `chooseImage` API 可以方便地选取图像的同时也能够得到所选图片的信息对象，其中就包含了尺寸数据[^2]。 如果采用的是 `<uni-file-picker>` 组件，则可以直接监听 change 事件或观察 v-model 的变化情况，从而捕获到包含有文件详情的对象数组，进而从中提取出每张图的具体大小信息[^3]。 ```javascript const fileList = ref([]); function handleFileChange(e) { console.log('Selected files:', e.detail.fileList); fileList.value = e.detail.fileList.map(item => ({ ...item, fileSize: item.size / 1024 + ' KB' // 将字节数转换成KB显示 })); } ``` 上述代码片段展示了如何捕捉由 `<uni-file-picker>` 返回的选择结果，并计算每个选定项目的实际占用空间量级（这里是以千字节即 KB 来衡量）。这使得开发者能够在提交前向用户提供有关待上载资源的一些反馈提示。

### 使用 `uni.uploadFile` 实现多文件循环上传 为了实现多文件的循环上传功能，在获取到多个文件路径之后，可以利用 JavaScript 的异步特性来依次处理这些文件。下面是一个具体的例子说明如何通过 `uni.chooseImage()` 获取图片并使用 `uni.uploadFile()` 进行逐个上传。 当调用 `uni.chooseImage()` 方法时可以选择最多9张照片作为待上传列表[^1]： ```javascript // 选择图片函数 function chooseImages() { let imagePaths = []; uni.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success(res) { const tempFilePaths = res.tempFilePaths; imagePaths.push(...tempFilePaths); uploadFiles(imagePaths); // 调用上传方法 } }); } ``` 对于每一个选中的文件路径，可以通过遍历数组的方式逐一执行 `uni.uploadFile()` 来完成上传操作。考虑到网络请求可能会失败的情况，应该加入错误重试机制以及进度提示给用户: ```javascript async function uploadFiles(paths){ for(let i=0; i<paths.length;i++){ try{ await new Promise((resolve,reject)=>{ uni.showLoading({title:'正在上传...'}); uni.uploadFile({ url: 'https://example.com/upload', // 替换成实际服务器地址 filePath: paths[i], name: 'file', formData:{ 'user': 'test' }, success(uploadRes) { console.log('upload-' + (i+1), JSON.parse(uploadRes.data)); resolve(); }, fail(err){ reject(err); }, complete(){ uni.hideLoading(); } }) }); }catch(error){ console.error(`第${i}次上传失败`, error); // 处理异常情况下的逻辑，比如重新尝试或通知用户 } } } ``` 上述代码片段展示了基本流程：先让用户选取要上传的照片，再构建一个循环结构去迭代所获得的所有临时文件路径，并针对每一条记录发起一次 HTTP POST 请求至目标 URL 完成数据提交过程。