uniapp上传图片显示进度

57 1 0

uniapp上传图片,官方文档写的比较清楚,此处笔记是因为客户特殊要求,上传提示进度条,查到方法特此笔记。

uploadImg(){
    var _self = this;
    uni.chooseImage({
        count: 1,
        sizeType:['copressed'],
        success:(res) =>{
            console.log(res)
            //因为有一张图片, 输出下标[0], 直接输出地址
             var imgFiles = res.tempFilePaths[0]
             console.log(imgFiles)
             _self.imgUrl = imgFiles;
             // 上传图片
             // 做成一个上传对象
             var uper = uni.uploadFile({
                 // 需要上传的地址
                 url:'http://192.168.0.15:8080/gas-site-admin/store/store/uploadFile',
                 // filePath  需要上传的文件
                 filePath: imgFiles,
                 name: 'file',
                 success(res1) {
                     // 显示上传信息
                     console.log(res1)
                     if(res1.statusCode == 200){
                         uni.showToast({
                            icon:'success',
                            title:'上传成功'
                         })
                         console.log('上传路径是:'+res1.data)
                     }
                }
             });
             // onProgressUpdate 上传对象更新的方法
             uper.onProgressUpdate(function(res){
                 // 进度条等于 上传到的进度
                 _self.percent = res.progress
                 console.log('上传进度' + res.progress)
                 console.log('已经上传的数据长度' + res.totalBytesSent)
                 console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
             })
        } 
    })
}
预览图
收藏
评论区