博客

uni-app 上传图片到七牛云

我的流程是：在上传图片到七牛之前，先调后端提供的接口获取token、key等，然后通过uni.uploadFile把token、key传给七牛；
token：从后端获取的token值；
key：这里需要做一下拼接（获取的文件名前缀+唯一码或者时间戳），唯一码：这里贴上大佬的链接：唯一码链接；时间戳的话自己加上即可。

1. 调后端接口获取token、key等值；

this.axios.request({
    url: `/file/storeToken`,
    method: 'GET',
}).then(res => {
    if (res.data.data) {
        let uploadMsg = res.data.data;
        // 唯一码
        let uniqueCode = generateUUID();
    }
}).catch(err => {
    console.log(err);
})

2. 从本地选择图片

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (chooseImageRes) {
        console.log(chooseImageRes.tempFilePaths);
    }
});

3. 上传图片到七牛云（注意：这里要把url换成七牛的！！！）
   

最后，附上完整代码

// 上传图片
onUpload() {
    uni.chooseImage({
        count: 9, // 默认9
        sizeType: ['compressed', 'original'],
        sourceType: ['album', 'camera'],
        success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            this.axios.request({
                url: `/file/storeToken`,
                method: 'GET',
            }).then(res => {
                if (res.data.data) {
                    let uploadMsg = res.data.data;
                    let uniqueCode = generateUUID();
                    uni.uploadFile({
                        url: 'https://up.qbox.me',
                        filePath: tempFilePaths[0],
                        name: 'file',
                        formData: {
                            'key': uploadMsg.keyPrefix + uniqueCode,
                            'token': uploadMsg.upToken
                        },
                        success: (uploadFileRes) => {
                            let key = JSON.parse(uploadFileRes.data).key;
                            let partImgUrl = uploadMsg.prefix + key;
                            this.partImgList.push({
                                imgUrl: partImgUrl
                            })
                        },
                        fail: (err) => {
                            console.log('fail', err);
                        }
                    });
                }
            }).catch(err => {
                console.log(err);
            })
        }
    });
}

值得注意的一点是：按照常理来说uni.chooseImage()应该在调接口之后，但是如果把uni.chooseImage()放在接口成功回调里面，你会发现调不起来选择图片的方法，两个操作换下位置就ok了。
我在chrome浏览器操作是正常的，但是这个项目需要兼容QQ浏览器，所以出现了这个问题，如果不需要QQ浏览器的话可以不用这么操作。

如有错误或不足，欢迎各位大佬评论指正。