uniapp從選擇圖片到上傳圖片

直接貼代碼

<template>
      <view class="container">
            <view @tap="chooseTheImg">上傳圖片</view>
      </view>
</template>

<script>
     methods:{
          //選擇圖片
          chooseTheImg(){
                uni.chooseImage({  
                      count: 1,  //圖片可選擇數量
                      sizeType: ['original','compressed'],  //original 原圖，compressed 壓縮圖，默認二者都有
                      sourceType: ['album'],   //album 從相冊選圖，camera 使用相機，默認二者都有。
                      success: res => {
                            let imgFiles = res.tempFilePaths   //圖片的本地文件路徑列表
                            this.uploadTheImg(imgFiles)
                      }
                })
          },
          //上傳圖片
          uploadTheImg(imgFiles){
                uni.uploadFile({
                      url: `${this.$baseUrl}/api-upload/uploadimg`,   //后端用於處理圖片並返回圖片地址的接口
                      header:{
                            "Token":this.userToken
                      },
                      filePath: imgFiles[0],
                      name: 'file',
                      success: res => {
                            let data=JSON.parse(res.data)   //返回的是字符串，需要轉成對象格式，打印data如下圖
                            if(data.code==200){
                                  console.log(data.msg)  //圖片地址
                            }
                      },
                      fail: () => {}
                })
          },
    } 
</script>