vue基于七牛云 上传图片、视频

引入依赖

import request from './request'   //这是基于 axios封装的请求
var qiniu = require('qiniu-js')  //引入 qiniu
import { getTimeForQiniu } from './date'   //这个  只是为了生成时间戳路径

先根据后台获取token

 
export function getQiniuToken() {
    return request({
        url: '    ',    //  对应后台token 请求接口 
        method: 'post',
        // params
    }).then(res => res.data.data).catch(e => {
        console.error("获取七牛云token失败", e)
    })
}

七牛云方法

export async function uploadQinuImage(file) {
    var token = await getQiniuToken()
    var key = getTimeForQiniu() + file.name
    var config = {
        // useCdnDomain: true,
        region: qiniu.region.z2,
        uptoken: token,
        domain: '  ',     //配置好的七牛云域名  如   https://cdn.qniyun.com/
        unique_names: true,
    };
    var putExtra = {
        // fname: file.name,
        // params: {},
        // mimeType: [] || null
        ...config,
    }
    var observable = qiniu.upload(file, key, token, putExtra, config)
    return new Promise((resolve, reject) => {
        var subscription = observable.subscribe({
            error(err) {
                reject(data)
            },
            complete(data) {
                data.path = `  `  //拼上七牛云域名  如   https://cdn.qniyun.com/ ${data.key}
                resolve(data)
            }
        }) // 上传开始
    })

}

导出方法

export default function uploadImage(file) {
    return uploadQinuImage(file)
}
 

七牛云组件引用

    import upload from "@/utils/upload";

传上 files流

         uploadImg(e) {
                let that = this;
                let files = e.target.files[0];
                upload(files).then(res => {
                    let obj = {
                        url: res.path,
                        type: 'IMAGE',
                        size: res.fsize,
                        key: res.key,
                        thumb: res.path
                    };
                    POST_RESOURCES(obj).then(res => {
                        Alert.success('上传成功');
                        this.getList();
                    });

                });
            }