uni-file-picker上传图片

### 使用 `uni-file-picker` 上传图片 #### HTML 部分 为了实现头像上传功能，可以使用如下结构来创建视图组件： ```html <view class="avatar" @click="Imageupload">头像上传</view> ``` 此部分代码提供了一个点击事件触发器用于启动图像选择过程。 #### JavaScript 方法定义 在脚本部分，需定义处理图像上传的方法。这里展示了如何利用 `uni.chooseImage()` 来选取本地图片，并准备将其发送给服务器[^1]。 ```javascript methods: { Imageupload() { uni.chooseImage({ count: 1, // 只允许选择一张照片作为头像 success(res) { const tempFilePaths = res.tempFilePaths; // 对选中的图片执行进一步操作，比如上传至服务器 console.log('Selected image:', tempFilePaths); } }); } } ``` 对于更复杂的场景，如自定义上传逻辑以及展示上传进度条，则可以在特定位置调用 `setProgressByCustomUpload` 函数更新界面中对应项的状态。该函数接收两个参数：一个是唯一标识符 (`uuid`)；另一个是用来表示当前传输百分比的数值(`progress`)[^2]。 当实现了上述基础之后，还需要考虑实际向后端提交数据的过程。通常情况下会涉及到构建 HTTP 请求并将选定文件的内容编码成适合网络传输的形式（例如 FormData）。这部分具体实现取决于所使用的框架和服务端API设计。 #### 实现完整的上传流程 下面是一个更加详细的例子，它不仅包含了前端的选择和预览，还包括了通过 AJAX 或者 Fetch API 向服务端发起请求的部分： ```javascript methods: { async Imageupload() { try { let result = await uni.chooseImage({count: 1}); let filePath = result.tempFilePaths[0]; // 创建FormData对象用来封装要上传的数据 var formData = new FormData(); formData.append("file", {uri:filePath,type:"image/jpeg"}); // 发起POST请求到指定URL地址 fetch('/api/upload', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); }); // 更新UI上的进度信息 this.setProgressByCustomUpload(generatedUUIDForThisFile, calculatedProgressPercentage); } catch (err) { console.warn(err.message); } }, setProgressByCustomUpload(uuid, progress){ /* Implementation as described earlier */ } } ```