uniapp app端上传图片
时间: 2025-01-08 21:08:25 浏览: 5
### 实现 UniApp 中 APP 端图片上传功能
在 UniApp 开发环境中,为了实现在 APP 端上传图片的功能,可以利用 `uni.chooseImage` 和 `uni.uploadFile` 方法来选取并上传图片。这些方法能够很好地兼容多个平台,并提供简洁易用的接口[^1]。
下面展示一段用于选择本地图片并通过网络请求将其发送给服务器(假设目标存储为阿里云 OSS)的具体实现方式:
#### 前端代码 (UniApp)
```javascript
// 定义页面中的按钮点击事件处理函数
methods: {
async uploadImage() {
try {
const res = await uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'] // 可以指定来源是相册还是相机,默认二者都有
});
let tempFilePaths = res.tempFilePaths;
const result = await uni.uploadFile({
url: 'https://your-server-url/upload', // 后端接收地址
filePath: tempFilePaths[0],
name: 'file',
formData: { 'user': 'test' }
});
console.log('Upload success:', JSON.parse(result.data));
} catch (err) {
console.error(err);
}
}
}
```
这段 JavaScript 代码展示了如何通过调用 `chooseImage` 来让用户挑选一张照片,再使用 `uploadFile` 将选好的图像文件提交到指定 URL 上去。
对于后端部分,则需设置好相应的路由和服务逻辑以便于正确解析来自客户端的数据流并将接收到的内容保存至阿里云对象存储服务(OSS)[^2]。
#### Java 后端代码片段 (Spring Boot 风格)
```java
@RestController
@RequestMapping("/upload")
public class UploadController {
@PostMapping("")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file,
@RequestParam String user){
// 文件名生成策略可以根据实际需求调整
String fileName = UUID.randomUUID().toString();
File dest = new File(fileName);
try{
Files.copy(file.getInputStream(), dest.toPath());
// 使用阿里云 SDK 或其他工具将临时文件上传至 OSS
return ResponseEntity.ok("{\"status\":\"success\"}");
}catch(Exception e){
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
}
```
此段 Java 代码定义了一个简单的 RESTful 接口 `/upload` ,用来接收从前端传来的 multipart/form-data 类型 POST 请求,并把其中携带的二进制数据写入磁盘或直接推送到云端仓库中。
阅读全文