uni-app图片上传到本地,后端存储图片地址,并返会前端,显示出来
时间: 2024-11-12 16:38:03 浏览: 29
Uni-app 中的图片上传操作通常涉及到前端处理用户选择的图片文件,然后通过网络请求发送给后端服务器。以下是步骤:
1. **前端处理**:
- 使用 Uni-app 的 `uni.chooseImage` 或者 `picker.pick` API 挑选用户选择的图片。
- 获得图片数据后,可以使用 `FileReader` API 将 base64 编码或者直接上传blob。
```javascript
uni.chooseImage({
count: 1, // 可以选择的照片张数
sourceType: ['album', 'camera'], // 图片来源,如相册、相机等
success: function (res) {
let localPath = res.tempFilePaths[0]; // 获取本地临时路径
// 或者 base64编码
let imgBase64 = uni.blobToBase64(res.fileList[0].tempFilePath);
// 发送POST请求将图片数据传给后端
}
})
```
2. **后端处理**:
- 后端接收到请求后,解析上传的数据,将其保存到服务器指定的目录,并返回新的图片URL(通常是绝对地址)。
- 应该考虑安全性,如对图片内容进行检查,防止非法上传。
3. **前端展示**:
- 接收到后端返回的图片URL后,更新页面上的图片标签,例如 `<img>` 标签的 `src` 属性设置为图片地址。
```html
<img :src="imageUrl" alt="上传图片">
```
其中,`imageUrl` 变量应该从后端获取的结果中取出并赋值。
阅读全文