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

做了一个项目,里面用到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;

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中,可以使用uni.uploadFile()方法来实现app图片的功能。具体步骤如下: 1. 首先,需要在manifest.json文件中配置权限,确保应用有访问相册的权限。在"App"节点下添加以下代码: ```json "android": { "permission": [ "android.permission.READ_EXTERNAL_STORAGE", "android.permission.WRITE_EXTERNAL_STORAGE" ] }, "app-plus": { "android": { "permission": [ "android.permission.READ_EXTERNAL_STORAGE", "android.permission.WRITE_EXTERNAL_STORAGE" ] } } ``` 2. 在需要上图片的页面,使用uni.chooseImage()方法选择图片,并获取到图片的临时文件路径。示例代码如下: ```javascript uni.chooseImage({ count: 1, // 最多可选择的图片数量 success: function(res) { var tempFilePaths = res.tempFilePaths; // 图片的临时文件路径 // 调用上图片的方法 uploadImage(tempFilePaths[0]); } }); ``` 3. 编写上图片的方法uploadImage(),使用uni.uploadFile()方法上图片。示例代码如下: ```javascript function uploadImage(filePath) { uni.uploadFile({ url: 'http://example.com/upload', // 上图片的接口地址 filePath: filePath, // 图片的临时文件路径 name: 'file', // 上图片时的字段名 success: function(res) { var data = JSON.parse(res.data); // 上成功后返回的数据 // 处理上成功后的逻辑 }, fail: function(err) { console.log(err); // 处理上失败后的逻辑 } }); } ``` 以上就是在uniapp中实现app图片的基本步骤。你可以根据自己的需求进行相应的修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值