uni-app图片上传实战

uni.uploadfile()
将本地资源上传到开发者服务器
客户端发起一个post请求
content-type
multipart/form-data 通过uni.chooseimage获取一个本地资源的临时文件路径后
将本地资源上传到指定服务器
url string 是 开发者服务器 url files aarry 否 需要上传的文件列表filepath string 是 要上传文件资源的路径name string 是 文件对应的keyheader object 否 http 请求 header, header 中不能设置 referer uploadtask 对象的方法列表
onprogressupdate callback 监听上传进度变化
abort 中断上传任务
onprogressupdate 返回参数说明
实战页面
 选择照片 data:{ percent:0, loading:false, disabled:false }, upload : function(){ _self = this; uni.chooseimage({ count: 1, sizetype: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourcetype: ['album'], //从相册选择 success: function (res) { const tempfilepaths = res.tempfilepaths; const uploadtask = uni.uploadfile({ url : 'https://demo.hcoder.net/index.php?c=upertest', filepath: tempfilepaths[0], name: 'file', formdata: { 'user': 'test' }, success: function (uploadfileres) { console.log(uploadfileres.data); } }); uploadtask.onprogressupdate(function (res) { _self.percent = res.progress; console.log('上传进度' + res.progress); console.log('已经上传的数据长度' + res.totalbytessent); console.log('预期需要上传的数据总长度' + res.totalbytesexpectedtosend); }); }, error : function(e){ console.log(e); } }); } }, php
getexename($_files['file']['name']); if($exename != 'png' && $exename != 'jpg' && $exename != 'gif'){ exit('不允许的扩展名'); } $imagesavepath = uniqid().'.'.$exename; if(move_uploaded_file($_files['file']['tmp_name'], $imagesavepath)){ echo $imagesavepath; } } } public function getexename($filename){ $pathinfo = pathinfo($filename); return strtolower($pathinfo['extension']); }} uni.chooseimage(object) 从本地相册选择图片或使用相机拍照
文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.savefile,在应用下次启动时才能访问得到。
tempfilepaths stringarray 图片的本地文件路径列表tempfiles objectarray 图片的本地文件列表,每一项是一个 file 对象 file 对象结构如下
path string 本地文件路径size number 本地文件大小,单位:b uni.chooseimage({ count: 6, // 默认9 sizetype: ['original', 'compressed'], // 原图,压缩图 sourcetype: ['album'], // 从相册选择 success: function(res) { console.log(json.stringify(res.tempfilepaths)); }});uni.previewimage(); 预览图片
current 当前显示图片的链接urls 需要预览的图片链接列表 uni.chooseimage({ count: 6, sizetype: ['original','compressed'], sourcetype: ['album'], success: function(res) { // 预览图片 uni.previewimage({ urls: res.tempfilepaths }); } uni.getimageinfo()
获取图片信息
orientation 参数说明枚举值 说明up 默认down 180度旋转left 逆时针旋转90度right 顺时针旋转90度up-mirrored 同up,但水平翻转down-mirrored 同down,但水平翻转left-mirrored 同left,但垂直翻转right-mirrored 同right,但垂直翻转 uni.chooseimage({ count: 1, sourcetype: ['album'], success: function (res) { uni.getimageinfo({ src: res.tempfilepaths[0], success: function (image) { console.log(image.width); console.log(image.height); } }); }}); uni.saveimagetophotosalbum(object)
保存图片到系统相册
filepath 图片文件路径
uni.chooseimage({ count: 1, sourcetype: ['camera'], success: function (res) { uni.saveimagetophotosalbum({ filepath: res.tempfilepaths[0], success: function () { console.log('save success'); } }); }}); 若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


什么是锂电能量包
一个低功耗的蓝牙智能门锁详细介绍
2018年度第四届“中国好手机颁奖典礼”OPPO包揽榜单前三
单片机12864 c程序
苹果系统iOS10.3更新时间马上到来?
uni-app图片上传实战
苹果原装USB PD充电器被中国工程师成功破解
VR全景相机Insta360 Pro 2,支持录制HDR视频,可实现远距离实时监控
SPEA网络研讨会 | 电动汽车电池测试的三大挑战
使用AI爱克斯开发板与LabVIEW实现麦克纳母轮小车的控制
什么是Kubernetes容器运行时CRI
快速靠近开关原理是什么
电化学传感器的使用寿命
华为首次对外解读C-V2X车联网战略 华为回应研发搬迁东莞为扩大规模
贴片头光电式位置传感器
关于建筑能耗监测系统的应用分析
高性能CMOS图像传感器厂商长光辰芯启动IPO
openeuler安装教程一:openeuler安装准备
Cardtek联手NXP推穿戴式移动支付解决方案
光纤和光缆一样吗?本质区别在哪里?