libs下的qiniu.js

import qiniu from 'qiniu'
import config from '../config'
import { exec } from 'shelljs'
qiniu.conf.ACCESS_KEY = config.qiniu.AK
qiniu.conf.SECRET_KEY = config.qiniu.SK
const bucket = config.qiniu.bucket
const bucketManager = new qiniu.rs.Client()
const uptoken = (key) => new qiniu.rs.PutPolicy(`${bucket}:${key}`).token()
const uploadFile = (uptoken, key, localFile) => new Promise((resolve, reject) => {
var extra = new qiniu.io.PutExtra()
qiniu.io.putFile(uptoken, key, localFile, extra, (err, ret) => {
if(!err) {
console.log('上传成功')
resolve()
}
reject(err)
})
})
// 因为七牛抓取互联网资源这个 node SDK 有坑，所以直接用 qshell，所以使用前需要全局安装
// npm i qshell -g
// 然后配置账号
// qshell account <你的AK> <你的SK>
const fetchImage = async (url, key) => new Promise((resolve, reject) => {
let bash = `qshell fetch ${url} ${bucket} '${key}'`
// let child = exec(bash, { async: true })
// child.stdout.on('data', data => {
//   resolve(data)
// })
exec(bash, (code, stdout, stderr) => {
if (stderr) return reject(stderr)
if (stdout === 'Fetch error, 504 , xreqid:') return reject(stdout)
resolve(stdout)
})
})
export default {
fetchImage,
uptoken,
uploadFile
}

routes下的qiniu.js

import { controller, get, post, log, put } from '../decorator/router'
import { uptoken } from '../libs/qiniu'
@controller('/qiniu')
export class qiniuController {
@get('/token')
async qiniuToken (ctx, next) {
let key = ctx.query.key
console.log(key)
let token = uptoken(key)
ctx.body = {
key: key,
token: token
}
}
}

vue中的js代码

async getUptoken (key) {
let res = await axios.get('/qiniu/token', {
params: {
key: key
}
})
console.log(res)
return res.data.token
},
async uploadImg (e) {
this.upload.dashoffset = this.upload.dasharray
var file = e.target.files[0]
var key = randomToken(32)
key = `products/${key}`
let token = await this.getUptoken(key)
let uptoken = {
uptoken: token,
key: Buffer.from(key).toString('base64')
}
Uploader.QINIU_UPLOAD_URL = '//up-z2.qbox.me/'
let uploader = new Uploader(file, uptoken)
uploader.on('progress', () => {
//let dashoffset = this.upload.dasharray * (1 - uploader.percent)
//this.upload.dashoffset = dashoffset
console.log(uploader.percent)
})
let res = await uploader.upload()
uploader.cancel()
console.log(res)
this.banner.image = res.key
// this.upload.dashoffset = 0
}

vue中的html

el-form-item(label="Banner图片" prop="image")
.upload-btn
svg(width='53px', height='37px', viewbox='0 0 53 37', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
g#Page-1(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd')
g#ic_backup_black_24px(transform='translate(-1.000000, -6.000000)')
polygon#Shape(points='0 0 55 0 55 55 0 55')
path#outline(d='M42.6907609,20.7503727 C41.2853571,13.6200155 35.0230435,8.26708075 27.5,8.26708075 C21.5270342,8.26708075 16.339441,11.6565839 13.7559783,16.6168323 C7.535,17.2781988 2.69875776,22.5484627 2.69875776,28.9347826 C2.69875776,35.7757919 8.25836957,41.3354037 15.0993789,41.3354037 L41.9673913,41.3354037 C47.671677,41.3354037 52.3012422,36.7058385 52.3012422,31.0015528 C52.3012422,25.5452795 48.0643634,21.1223913 42.6907609,20.7503727 Z', stroke='#78909C', stroke-width='3', :stroke-dasharray='upload.dasharray', :stroke-dashoffset='upload.dashoffset')
path#Shape(d='M42.6907609,20.7503727 C41.2853571,13.6200155 35.0230435,8.26708075 27.5,8.26708075 C21.5270342,8.26708075 16.339441,11.6565839 13.7559783,16.6168323 C7.535,17.2781988 2.69875776,22.5484627 2.69875776,28.9347826 C2.69875776,35.7757919 8.25836957,41.3354037 15.0993789,41.3354037 L41.9673913,41.3354037 C47.671677,41.3354037 52.3012422,36.7058385 52.3012422,31.0015528 C52.3012422,25.5452795 48.0643634,21.1223913 42.6907609,20.7503727 Z M31.6335404,26.8680124 L31.6335404,35.1350932 L23.3664596,35.1350932 L23.3664596,26.8680124 L17.1661491,26.8680124 L27.5,16.5341615 L37.8338509,26.8680124 L31.6335404,26.8680124 Z', fill='#CFD8DC', fill-rule='nonzero')
.text 上传图片
input(type='file', @change='uploadImg($event)')

报错

终端：

浏览器