<template>
<view>
<view>
<progress :percent="percent" stroke-width="10"></progress> //进度条。
</view>
<view>
<button type="primary" :loading="loading" :disabled="disabled" @click="upload">选择照片</button>
</view>
</view>
</template>
<script>
var _self;
export default {
data:{
percent:0, //百分比0~100
loading:false,
disabled:false
},
methods : {
upload : function(){
_self = this;
uni.chooseImage({ //从本地相册选择图片或使用相机拍照。
count: 1, //最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
//album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
sourceType: ['album'],
success: function (res) {
const tempFilePaths = res.tempFilePaths;
//如果希望返回一个 uploadTask 对象，需要至少传入 success / fail / complete 参数中的一个。
const uploadTask = uni.uploadFile({ //将本地资源上传到开发者服务器
url : '后端接收地址',
filePath: tempFilePaths[0],
name: 'file',
formData: { //HTTP 请求中其他额外的 form data
'user': 'test'
},
success: function (uploadFileRes) {
console.log(uploadFileRes.data);
}
});
//通过 uploadTask，可监听上传进度变化事件，以及取消上传任务。
//abort : 中断上传任务
//onProgressUpdate : 监听上传进度变化
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);
}
});
}
},
}
</script>
uni-app实现选择图片上传并显示进度条
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 公司项目中总结的一点经验，给有遇到类似问题的小伙伴提供一下思路。水平浅，代码不规整的地方，望轻喷。部分未解决问题（...
- 公司数据存储选择使用七牛，七牛的提供的API的确很简单，方便客户使用。但是也有缺憾，当初使用的时候发现两个七牛的缺...
