uniapp 适配小程序上传图片功能

<text class="uploader-img-button" @tap="chooseTheImg">点击头像上传图片</text>
//选择图片
chooseTheImg() {
    let that = this;

    uni.chooseImage({
        count: 1, //图片可选择数量
        sizeType: ['compressed'], //original 原图,compressed 压缩图,默认二者都有
        sourceType: ['album', 'camera'], //album 从相册选图,camera 使用相机,默认二者都有。
        extension: ['.png', '.jpg'], // 限制可选择的图片格式
        success: res => {
            // #ifdef MP-WEIXIN
            that.uploadTheImg(res.tempFilePaths[0]);
            // #endif

            // #ifndef MP-WEIXIN
            that.uploadTheImg(res.tempFiles[0]);
            // #endif
        }
    });
},
    
//上传图片
    uploadTheImg(file) {
        let that = this;

        uni.showLoading({
            title: '上传中...',
            mask: true
        });

        // 获取七牛上传信息接口(请求后端接口拿七牛的token)
        GetQiniuUploadInfo({
            FileType: 1,
            FileName: file.name || new Date().getTime() + '.png',//没有名字用时间戳
        })
            .then(result => {
            if (result.code == 100) {
                uni.showLoading({
                    title: '上传中...',
                    mask: true
                });

                // #ifdef MP-WEIXIN
                wx.uploadFile({
                    url: 'https://upload-z2.qiniup.com',
                    name: 'file',
                    filePath: file,
                    header: {
                        'Content-Type': 'multipart/form-data'
                    },
                    formData: {
                        key: result.data.fileName,
                        token: result.data.qnToken
                    },
                    success: function(res) {
                        uni.showToast({
                            title: '图片上传成功!'
                        });
                    },
                    fail: function(err) {
                        uni.showToast({
                            title: err
                        });
                    }
                });

                // #endif

                // #ifndef MP-WEIXIN
                // 七牛图片压缩(可跳过压缩)
                qiniu
                    .compressImage(file, {
                    quality: file.size > 1000000 ? 0.8 : 1,
                    noCompressIfLarger: true
                })
                    .then(data => {
                    // 压缩成功后上传图片
                    const observable = qiniu.upload(
                        data.dist,
                        result.data.fileName,
                        result.data.qnToken,
                        {
                            fname: file.name
                        },
                        {
                            useCdnDomain: true
                        }
                    );
                    observable.subscribe({
                        next(res) {},
                        error(err) {
                            uni.showToast({
                                title: err
                            });
                        },
                        complete(res) {
                            uni.showToast({
                                title: '图片上传成功!'
                            });
                        }
                    });
                })
                    .catch(data => {
                    uni.showToast({
                        title: '上传失败'
                    });
                });
                // #endif
            }
        })
            .catch(err => {
            uni.showToast({
                title: '上传失败'
            });
        });
    }

扫码加q群
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值