<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>