uniapp 上传图片

uniapp上传图片,并回显


    
        
        
            点击上传真实的营业执照,保证图像清晰。
            支持jpg、png等格式图片,大小不超过15M
        
    
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()
                    }
                }
            });
        },
}


你可能感兴趣的:(uniapp 上传图片)