choseImg() { var me = this var serverUrl = this.serverUrl; uni.chooseImage({ count: 8, sizeType: ['original', 'compressed'], success: function(res) { let arr = res.tempFiles for(let i = 0; i < arr.length; i++) { if(arr[i].size > 10458760) { uni.showToast({ title: "图片过大", icon: 'error' }); return } } uni.showLoading({title: "上传中"}); const uploadTask = http.uploadFile(res.tempFilePaths).then(picRes => { me.imgArr = picRes me.obj.pictures = picRes uni.hideLoading() uni.showToast({ title: "上传成功", icon: 'success' }); }) } }); },
时间: 2024-03-04 21:49:52 浏览: 74
这是一段 JavaScript 代码,其中定义了一个名为 `choseImg()` 的函数。该函数利用 uni.chooseImage() 方法从用户的设备中选择相册中的图片,并进行一些验证操作,如检查图片的大小是否符合要求。如果图片大小符合要求,则通过 http.uploadFile() 方法将图片上传至服务器,并在上传成功后显示成功提示。最终,该函数会将上传成功后的图片数组赋值给 `me.imgArr` 和 `me.obj.pictures` 变量。
相关问题
uni.uploadFile上传图片返回不支持的图片格式
### 解决 `uni.uploadFile` 上传图片时遇到的不支持图片格式问题
#### 检查服务器配置
为了确保上传功能正常工作,需验证服务器端对于接收文件类型的配置。通常情况下,在Web服务器(如Nginx)或应用服务器上应设定允许特定MIME类型[^3]。
- **Nginx 配置**
如果使用 Nginx 作为反向代理,则应在配置文件中适当位置加入如下指令来扩展可接受的内容类型:
```nginx
types {
image/jpeg jpg;
image/png png;
image/gif gif;
...
}
```
- **应用程序层处理**
后端代码应当对接收到的数据进行校验,只允许合法的图像格式通过。这可以通过编程语言内置函数完成,比如 PHP 的 `getimagesize()` 或者 Python 中 PIL 库的方法等。
#### 前端代码调整
前端部分可以提前过滤掉不符合条件的文件再发起请求,减少不必要的网络交互。以下是基于 Vue 和 Uni-app 实现的例子[^1]:
```javascript
methods:{
Imageupload(){
const validTypes = ['image/jpg', 'image/jpeg', 'image/png']; // 定义有效的 MIME 类型列表
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
let tempFilePaths = res.tempFilePaths;
// 获取选中图片的信息
wx.getFileInfo({
filePath: tempFilePaths[0],
success(fileRes){
var fileType = fileRes.fileType.toLowerCase();
if (!validTypes.includes(`image/${fileType}`)){
console.error('Invalid File Type');
return false;
}
// 继续执行上传操作...
uni.uploadFile({
url: 'http://yourserver.com/upload',
filePath: tempFilePaths[0],
name: 'file',
formData: {'user': 'test'},
success(uploadRes) {
console.log(uploadRes.data);
},
fail(err){
console.error(err);
}
});
}
})
}
});
}
}
```
上述代码片段展示了如何在调用 `chooseImage` 方法后立即检查所选文件是否属于预定义的有效 MIME 类型之一,并仅当满足条件时才继续尝试上传过程。
阅读全文
相关推荐
















