web上传图片至七牛云服务器

首先安装qiniu-js

cnpm install qiniu-js

引入

const qiniu = require('qiniu-js')
import { qiNiuUpToken } from '@/api/global/globalCity' // 引入获取七牛Token接口

export function uploadImg(file){
    return new Promise((resolve, reject) => {
        qiNiuUpToken({},res => {
            let token = res.upToken
            let fielUrl = res.fileUrl
            var data = new FormData();
            data.append('token', token);
            data.append('file', file);
            //把图片上传到 七牛云
            let config = {
                useCdnDomain: true,
                region: qiniu.region.z0,     //华东
            };
            let putExtra = {
                fname: "",
                params: {}
            };
            var observable = qiniu.upload(file, file.name, token , putExtra, config)
            var observer = {
                next(res){
                },
                error(err){
                },
                complete(res){
                    let qiniuFileUrl = fielUrl + '/' + file.name + '?imageView2/2/w/100/h/100/q/75|watermark/2/text/QUJL/font/5b6u6L2v6ZuF6buR/fontsize/240/fill/I0ZGRkZGRg==/dissolve/100/gravity/SouthEast/dx/5/dy/5|imageslim'
                    resolve(qiniuFileUrl)
                }
            }
            var subscription = observable.subscribe(observer) // 上传开始
        })
    })
}

这里就是获取七牛token的接口，接口会返回Token和七牛的文件地址前缀

上传成功后拿到地址前缀并且拼上文件名就能拿到上传后的地址了。