七牛云上传图片插件封装

1、安装七牛

npm install qiniu-js

2、使用七牛

import * as qiniu from 'qiniu-js'
import request from '@/utils/request';
import qs from "qs"; //使用post请求，表单格式时，将json转为表单格式
import path from 'path';
//获取七牛token,自己封装的请求后台的接口
export function getList(data) {
    return request({
        url: '/pc/upload/get_qiniu_info',
        method: 'post',
        data: qs.stringify(data)
    })
}

const qiniuUpload = (file /**图片文件对象 */) => {
    return new Promise((resolve, reject) => {
        getList({ url: location.href }).then(data => {
            // console.log(data);
            let { token, domain } = data;
            // params = { token, domain }
            qiniuHandle(file, token).then(res => {
                // console.log(path.join(domain, res));
                resolve(path.join(domain, res));
            });
        })


    });

}
const qiniuHandle = (file, token) => {
    return new Promise((resolve, reject) => {
        const options = {
            quality: 0.92,
            noCompressIfLarger: true
        }
        const key = null  // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
        let config = {
            useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            region: qiniu.region.z0     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };

        let putExtra = {
            fname: "",  //文件原文件名
            params: {}, //用来放置自定义变量
            mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        qiniu.compressImage(file, options).then(data => {
            let observable = qiniu.upload(file, key, token, putExtra, config);
            observable.subscribe({
                next: (res) => {
                    // 主要用来展示进度
                    let total = res.total;
                    // window.Qapp.showLoad({content:'上传图片中！'})
                    console.log("进度：" + parseInt(total.percent) + "% ")
                },
                error: (err) => {
                    // 失败报错信息
                    console.log(err)
                },
                complete: (res) => {
                    // 接收成功后返回的信息
                    // console.log(res.key)
                    resolve(res.key);
                }
            })
        })
    });

}
export default qiniuUpload;