uniappH5 uview端文件上传

### 如何在 UniApp H5 环境下使用 uView 实现文件上传功能 #### 使用 `uni.chooseImage` 和 `uni.uploadFile` 完成图片上传 在 UniApp 中，可以通过调用原生 API `uni.chooseImage` 来选择并获取图片的临时路径[^1]。随后，可以利用自定义逻辑对图片进行预处理（如压缩）。最终通过 `uni.uploadFile` 或者 HTTP 请求库完成图片的实际上传。 以下是基于 uView 的具体实现方法： ```javascript // 在页面中引入必要的依赖 <template> <view> <!-- 图片展示区域 --> <block v-for="(item, index) in imgList" :key="index"> <image :src="item" mode="aspectFit"></image> </block> <!-- 添加按钮 --> <button @click="chooseAndUpload">选择并上传图片</button> </view> </template> <script> export default { data() { return { imgList: [] // 存储已选中的图片路径数组 }; }, methods: { chooseAndUpload() { uni.chooseImage({ count: 9, // 可以一次最多选择几张图片 sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 success: (res) => { const tempFilePaths = res.tempFilePaths; // 遍历每一张图片执行上传操作 tempFilePaths.forEach((filePath) => { this.compressAndUpload(filePath); }); } }); }, compressAndUpload(tempFilePath) { // 自定义压缩函数或者直接跳过压缩 let compressedPath = tempFilePath; // 如果有压缩需求可在此处加入压缩逻辑 // 开始上传 uni.uploadFile({ url: 'https://your-backend-api/upload', // 替换为实际服务器地址 filePath: compressedPath, name: 'file', formData: { user_id: 123 // 根据业务需要传递额外数据 }, success: (uploadRes) => { console.log('上传成功:', uploadRes.data); // 将成功的图片路径存入列表供后续显示或其他用途 this.imgList.push(compressedPath); }, fail: () => { console.error('上传失败'); } }); } } }; </script> ``` 上述代码实现了以下功能： - 用户点击按钮后触发 `uni.chooseImage` 方法来选取图片。 - 获取到图片的临时路径后，将其逐一上传至指定 URL 地址。 - 成功上传后的图片会存储到前端变量 `imgList` 中以便于进一步渲染或管理。 #### 结合 uView 组件优化用户体验 为了提升交互性和美观度，推荐结合 uView 提供的相关组件。例如，uView 的 `u-upload` 组件可以直接封装以上复杂逻辑，并提供更友好的界面支持多张图片的选择与上传[^2]。 下面是基于 `u-upload` 的简化版本示例： ```vue <template> <view class="content"> <u-upload :action="'https://your-backend-api/upload'" :max-count="9" multiple :custom-btn="true" > <u-button type="primary">选择并上传图片</u-button> </u-upload> </view> </template> <script> export default {}; </script> ``` 此方案无需手动编写复杂的事件监听器和上传逻辑，只需简单配置即可满足大部分场景下的需求。 #### 处理跨域问题 如果遇到 H5 环境下的跨域访问限制，则需调整开发环境设置。对于 uView 框架而言，在本地调试阶段可通过修改 `vue.config.js` 文件添加代理规则解决这一难题[^4]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://your-backend-server.com/', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 这样便能有效规避因 CORS 导致的功能异常现象。 ---