使用uni-file-picker完成文件选择

### 如何使用 `uni-file-picker` 实现文件选择功能 #### 基础实现 在 `uni-app` 中，可以通过 `<uni-file-picker>` 组件轻松实现文件选择功能。该组件支持多种配置选项，能够满足不同场景下的需求。 以下是基础的模板代码示例： ```html <template> <view> <!-- 使用 uni-file-picker --> <uni-file-picker v-model="fileList" :limit="3" file-mediatype="all" @select="onSelect" ></uni-file-picker> </view> </template> <script> export default { data() { return { fileList: [] // 存储选中的文件列表 }; }, methods: { onSelect(e) { console.log("Selected files:", e); this.fileList = [...this.fileList, ...e.tempFiles]; } } }; </script> ``` 此代码展示了如何通过绑定 `v-model` 属性到数据变量 `fileList` 来动态管理所选文件[^1]。同时，设置了 `limit` 和 `file-mediatype` 属性分别用于限制最大可选文件数量以及指定允许选择的媒体类型。 --- #### 高级功能：自定义样式与事件处理 如果需要更复杂的交互逻辑或者定制化界面，则可以进一步扩展组件的功能。例如，设置图片大小、边框样式等参数，并监听特定事件（如 `@select`, `@delete` 或者 `@progress`）以便实时响应用户的操作。 下面是一段带有更多高级特性的例子： ```html <template> <view class="container"> <uni-file-picker v-model="selectedImages" :limit="5" file-mediatype="image" :sourceType="['album', 'camera']" :image-styles="customImageStyles" @select="handleSelectionChange" /> </view> </template> <script> export default { data() { return { selectedImages: [], customImageStyles: { width: 80, height: 80, border: { color: "#ccc", width: "2px", style: "dashed" } } }; }, methods: { handleSelectionChange(eventData) { console.log("New selection detected!", eventData); this.selectedImages.push(...eventData.tempFiles); if (this.selectedImages.length >= 5) { alert("You have reached the maximum number of selections."); } } } }; </script> ``` 在此实例中，我们不仅限定了最多可以选择五张照片，还调整了每张预览图标的尺寸及其外观效果[^2]。 --- #### 文件上传集成 除了单纯的选择外，很多时候还需要将这些资源提交至服务器端保存起来。这时就需要结合 API 请求方法一起工作了。这里给出一个简单的基于 UniCloud 的上传流程演示： ```javascript methods: { async uploadFile(tempFilePath) { try { const res = await uni.uploadFile({ url: "https://your-server-endpoint/upload", // 替换成实际接口地址 filePath: tempFilePath, name: "uploaded_file", header: { Authorization: localStorage.getItem("token") || "" } // 添加必要的认证信息 }); if (res.statusCode === 200 && JSON.parse(res.data).status === "ok") { console.log("Upload succeeded!"); } else { throw new Error(`Server returned unexpected status code ${res.statusCode}`); } } catch (err) { console.error(err.message); } }, onFilePicked(e) { this.uploadFile(e.tempFilePaths[0]); } } ``` 当用户选择了某个本地存储项之后调用上面的方法即可完成整个过程[^2]^。 --- ### 注意事项 尽管官方文档已经提供了详尽说明但仍可能存在某些特殊情况需要注意规避比如权限不足导致无法访问相册等问题因此建议开发者们仔细阅读相关资料并做好充分测试准备[^3].