uniapp项目上传本地文件

### 实现 UniApp 文件上传功能 为了实现在 UniApp 中上传本地文件的功能，可以采用多种方法。一种常见的方式是利用 `uview` 的上传组件来简化操作过程[^3]。 #### 使用 uView 组件实现文件上传 通过配置 `<u-upload>` 组件的相关属性，能够轻松完成文件的选择与上传工作： ```html <u-upload id="selectPhoto" :style="{display: selectPhotoDisplay}" :useBeforeRead="true" @afterRead="afterRead" @delete="deletePic" name="1" multiple accept="*/*" <!-- 修改接受的文件类型 --> uploadText="选择文件" :maxCount="9" :maxSize="10 * 1024 * 1024" @oversize="overSize" :previewFullImage="false" :show-upload-list="true" autoUpload > </u-upload> ``` 需要注意的是，在实际应用中可能需要调整某些参数以适应具体的业务场景。例如，如果要支持所有类型的文件而不是仅限于图像，则应将 `accept` 属性设置为 `"*/*"` 或者指定特定扩展名列表；另外还可以控制是否自动提交 (`autoUpload`) 和显示已选中的文件列表 (`show-upload-list`) 等选项。 #### 处理文件读取后的逻辑 当用户选择了待上传的文件之后，会触发 `@afterRead` 事件处理器。此时可以在该回调函数内部处理进一步的操作，比如发起网络请求向服务器发送数据或者执行其他必要的验证步骤: ```javascript methods: { afterRead(event) { const list = event.file; // 对单个或多个文件进行遍历 list.forEach((item, index) => { // 创建 FormData 表单对象用于封装文件信息 var formData = new FormData(); formData.append('file', item); // 发送 POST 请求至后端接口地址 uni.uploadFile({ url: 'http://your.server/api/upload', filePath: item.path, name: 'file', formData: {}, success(uploadRes) { console.log('upload success:', JSON.parse(uploadRes.data)); }, fail(err) { console.error('upload failed:', err); } }); }) } } ``` 上述代码片段展示了如何捕获由 `u-upload` 触发的文件选择事件，并针对每一个被选取的对象构建 HTTP 请求来进行上传动作。其中涉及到创建 `FormData` 来装载文件流以及调用 `uni.uploadFile()` 方法传递给远程服务端处理。