uniapp 上传图片

uniapp上传图片，并回显

<!-- 拍照上传 -->
    <view class="upload-img">
        <image class="img_icon" v-if="imgSrc" :src="imgSrc" @tap="onGetImgClick"></image>
        <view class="empty_box" v-else  @tap="onGetImgClick">
            <view class="tip_text">点击上传真实的营业执照，保证图像清晰。</view>
            <view class="tip_text">支持jpg、png等格式图片，大小不超过15M</view>
        </view>
    </view>

data() {
    return {
          imgSrc: '',
    }
},
methods:{
    onGetImgClick() {
            const that = this;
            uni.chooseImage({
                count: 1, // 最多可以选择的图片张数，默认9
                sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
                sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                success: function(res) {
                    console.log('chooseImage-----》》》》》》》》', res);
                    //判断图片格式
                    let tempStr = res.tempFilePaths[0].split('.');
                    let lowerStr = tempStr[1].toLowerCase();
                    if(lowerStr != 'png' && lowerStr !== 'jpg' && lowerStr !== 'jpeg' && lowerStr !== 'bmp') {
                        uni.showToast({
                            title: '请上传PNG、JPG、JPEG、BMP格式的图片',
                            icon: 'none',
                            duration: 3000
                        });
                        return;
                    }
                    console.log(res.tempFiles,'beforre--------');
                    if(res.tempFiles[0]['size']>15*1024*1024){
                        uni.showToast({
                            title: '图片大小不能超过15M',
                            icon: 'none',
                            duration: 3000
                        });
                        return;
                    }
                    uni.showLoading({
                        title:'上传中...'
                    })
                    if(res.tempFiles[0]['size']<1*1024*1024){
                        that.uploadImgFile(res.tempFilePaths[0],that)
                    }else{
                        uni.compressImage({
                          src: res.tempFilePaths[0],
                          quality: 80,
                          success: res => {
                              console.log(res,'=========res');
                            that.uploadImgFile(res.tempFilePath,that)
                          }
                        })
                    }
                }
            });
        },
        uploadImgFile(filePath,that){
            uni.uploadFile({
                url: '上传图片请求地址',
                filePath: filePath,
                name: 'file',
                formData: {
                    file: filePath
                },
                header: {
                    'Content-Type': 'multipart/form-data',
                    'Access-Token': uni.getStorageSync('ycrtoken'),
                },
                success: response => {
                    let res = JSON.parse(response.data);
                    
                    console.log(res, '----res');
                    if(res.code == 11400200) {
                        that.showInfo = res.data
                        // console.log('请求成功_______________', res);
                        // 调用下载接口
                        that.imgSrc = filePath
                        that.attachId = res.data.attachId
                        // that.downloadImg(res.data.attachId);
                        uni.hideLoading()
                    }else if(res.code ==10001401 ||res.code == 41400401){
                        that.clearToken()
                    }else{
                        uni.showToast({
                            title: res.message||'',
                            icon: 'none',
                            duration: 3000
                        });
                        uni.hideLoading()
                    }
                },
                fail: err => {
                    uni.hideLoading()
                    console.log('请求失败_______________', err);
                }
            });
        },
    // 下载图片 暂未用到
    downloadImg(id) {
            uni.downloadFile({
                url: base.baseUrl + 'api/fileDownload/download/' + id,
                header: {
                    'Access-Token': uni.getStorageSync('ycrtoken'),
                },
                success: res => {
                    if(res.statusCode === 200) {
                        console.log('下载成功');
                        this.imgSrc = res.tempFilePath;
                        uni.hideLoading()
                    }
                }
            });
        },
}

<style scoped lang="scss">
  .upload-img{
    margin: 32rpx;
    height: 432rpx;
    background: #F6F7F9;
    border-radius: 32rpx;
    .img_icon {
        display: block;
        margin: 0 auto;
        width: 100%;
        height:432rpx;
        border-radius: 32rpx;
    }
    .empty_box{
        padding-top: 112rpx;
        .empty_img{
            width: 198rpx;
            height: 138rpx;
            display: block;
            margin: 0 auto 48rpx;
        }
        .tip_text{
            margin: 0 32rpx;
            text-align: center;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 40rpx;
        }
    }
}
</style>