uniapp post请求 图片回显

### 在 UniApp 中通过 POST 请求上传图片并实现在前端页面上回显显示 #### 准备工作 为了实现这一目标，需先配置好服务器端用于接收文件的接口以及设置允许跨域访问。对于客户端而言，则要准备好能够选择本地图片并通过网络请求发送出去的功能模块。 #### 客户端代码编写 ##### HTML 结构定义 创建一个简单的表单让用户可以选择想要上传的照片： ```html <template> <view class="container"> <!-- 图片预览区域 --> <image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image> <!-- 文件选择按钮 --> <button type="primary" @click="chooseImage">选择图片</button> <!-- 提交按钮 --> <button type="warning" @click="uploadImage">上传图片</button> </view> </template> ``` ##### JavaScript逻辑处理 引入必要的 API 并完成图像的选择与上传操作： ```javascript <script setup lang="ts"> import { ref } from 'vue'; // 假设这里已经导入了相应的API函数 let imageUrl = ref(''); // 存储临时展示用的链接 const tempFilePaths = ref([]); async function chooseImage() { try{ const res = await uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'] }); tempFilePaths.value = res.tempFilePaths; imageUrl.value = tempFilePaths.value[0]; } catch(e){ console.error("Error choosing image:", e); } } async function uploadImage(){ let upUrl = "http://your.server.com/api/upload"; // 替换成实际的服务端地址 if (!tempFilePaths.value.length) return; try{ const result = await new Promise((resolve,reject)=>{ uni.uploadFile({ url:upUrl, filePath:tempFilePaths.value[0], name:'file', formData:{}, success:(res)=> resolve(res), fail:error=> reject(error) }) }); // 处理返回的数据... console.log(result.data); // 如果服务端响应中有可以直接使用的 URL 可以直接赋值给 `imageUrl` 进行刷新显示 // 或者根据业务需求做进一步的操作 } catch(err){ console.error("Failed to upload file.", err); } } </script> ``` 上述代码实现了基本的图片选取和上传流程[^2]。当用户选择了图片之后会立即在界面上显示出所选照片作为预览；点击“上传”后则向指定的服务器发起带有该图片数据的 HTTP POST 请求，并等待反馈以便后续可能的动作（比如更新界面中的图片列表等）。