uniapp图片上传手机端和浏览器端的不同

lfkabb

已于 2022-03-04 15:52:49 修改

阅读量5.5k

点赞数

分类专栏： uniapp 文章标签：前端 javascript 图像处理

于 2022-03-04 15:52:13 首次发布

本文链接：https://blog.csdn.net/lfkabb/article/details/123277368

版权

uniapp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细记录了在uniapp中处理Android端与浏览器端图片上传差异的问题。通过获取设备类型，针对不同平台使用不同的路径解析方式获取图片后缀名，确保代码在两端都能正常工作。在创建时获取设备平台，然后根据平台分别处理uni.chooseImage()返回的tempFiles，从而正确获取图片的后缀名。

摘要由CSDN通过智能技术生成

做了一个项目，里面用到uniapp上传图片，并且是android端的。我先在浏览器里运行可以，但在手机端就不行，后来经过调试，发现这两个端上传图片时有区别……

下面打印一下 uni.chooseImage（{}）之后的 success里面的：

android端调试打印的：

浏览器里调试打印的：

所以这个res.tempFiles都各不相同了~；因而之后要找到图片地址路径就得分情况讨论：

之前写一种情况可适用于浏览器就不能适用于手机端。

后来这么写：

console.log(res);
						let fileType = res.tempFiles;
						let hzm=[];
						console.log(fileType);
						if(that.platform == "android"){
							fileType.forEach((item,index)=>{
								console.log(item.path);
								var dist=item.path
								let idx=dist.indexOf(".")
								dist=dist.substring(idx);
								hzm.push(dist)
							})
						}else{
							fileType.forEach((item,index)=>{
								console.log(item.name)
								var dist=item.name
								let idx=dist.indexOf(".")
								dist=dist.substring(idx);
								hzm.push(dist)
							})
						}
						console.log(hzm)

最后是获取到图片的后缀名。

当然前面得获取设备类型，在created里：

let platform = uni.getSystemInfoSync().platform;
			console.log(platform);
			that.platform = platform;

这样就可以准确获取到图片的后缀名了 ^_^ ^_^