技術標籤：vue

首先安裝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和七牛的檔案地址字首

上傳成功後拿到地址字首並且拼上檔名就能拿到上傳後的地址了。