七牛上传工具

由于项目中常常用到七牛上传，每次都要去做一次配置其实很麻烦，索性在react下写了一个工具，用于完成七牛上传的工作。 这里主要用到qiniu-js，可以自行npm了解一下。

import { Toast } from 'antd-mobile';
import * as qiniu from 'qiniu-js';
import Request from './Request';
export default async (file, isblob = false) => {
    let qiNiuDataInfo: {
        token: string;
        domain: string;
    } = {
        token: '',
        domain: '',
    };
    let newfiles;
    let upfiles;
    // 获取七牛信息
    const getQiNiuInfo = async () => {
        await Request.get('https://XXXXXX').then(({ data }) => {
            qiNiuDataInfo = data;
        });
    };
    // base64转Blob
    const dataURLtoBlob = (dataurl) => {
        const arr = dataurl.split(',');
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        newfiles = new Blob([u8arr], { type: mime });
    };
    // 上传
    const upload = (blbfile) => new Promise((resolve, reject) => {
        const config = {
            useCdnDomain: true,
            disableStatisticsReport: false,
            retryCount: 6,
            region: qiniu.region.z2,
        };
        const putExtra = {
            fname: '',
            params: {},
            mimeType: null,
        };
        if (blbfile) {
            const observables = qiniu.upload(blbfile, undefined, qiNiuDataInfo.token, putExtra, config);
            const subObject = {
                error: () => {
                    Toast.fail('上传出错', 1);
                    reject();
                },
                complete: (response) => {
                    Toast.success('上传成功', 1);
                    if (response.key) {
                        const imgurl = qiniu.imageMogr2({
                            'auto-orient': true,      // 布尔值，是否根据原图EXIF信息自动旋正，便于后续处理，建议放在首位。
                        }, response.key, qiNiuDataInfo.domain);
                        upfiles = `https://${imgurl}`;
                    }
                    resolve();
                },
            };
            observables.subscribe(subObject);
        }
    });
    // 获取七牛上传的凭证
    await getQiNiuInfo();
    // 如果传入的file是base64，则需要先转成file
    if (isblob) {
        await dataURLtoBlob(file); // 转file
        await upload(newfiles);
    } else {
        await upload(file);
    }
    return upfiles;
};

要用到这个方法的页面

import UploadFn from '../UploadFn';

把得到的file传入方法内,执行一下，在回调里就得到了上传后的图片地址了

UploadFn(files).then((imgurl) => {
                    console.log(imgurl);
                });