七牛云存储开发图片上传功能
1、注册登录七牛云，并实名认证，对象存储控制台，新增bucket存储空间
2、nodejs服务器安装npm install qiniu --save
const common = require('../../lib/common.js')
const qiniu = require('qiniu')
let niu = {}
niu.errorHandler = common.errorHandler
niu.createToken = function(req, res, next) {
let result = req.body.result
var accessKey = common.config.qiniuAccessKey
var secretKey = common.config.qiniuSecretKey
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
var options = {
scope: 'images', // 创建好的bucket
expires: 3600 // 过期时间 单位s
}
var putPolicy = new qiniu.rs.PutPolicy(options)
var uploadToken=putPolicy.uploadToken(mac)
result.qiniu = uploadToken
return common.send(req, res, {status: 0, msg: '登录成功！', data: result})
}
module.exports = niu通过以上方法生产客户端上传图片需要用的token
3、客户端安装npm install qiniu-js --save
confirm() {
let formData = new FormData(this.$refs.form.$el)
let file = formData.get('file')
let key = file.name
let putExtra = {
mimeType: ['image/png', 'image/jpeg'] || null // 前端校验图片格式
}
console.log(file)
var observable = qiniu.upload(file, key, this.token, putExtra)
var observer = {
next(res) {
console.log(res)
},
error(err) {
console.log(err)
},
complete(res) {
console.log(res)
}
}
var subscription = observable.subscribe(observer) // 上传开始
console.log(subscription)
// // or
// var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
// subscription.unsubscribe() // 上传取消
}
observer的参数注释
next: 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进度信息。
total.loaded: number，已上传大小，单位为字节。
total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
total.percent: number，当前上传进度，范围：0～100。
error: 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object：
err.isRequestError: 用于区分是否 xhr 请求错误；当 xhr 请求出现错误并且后端通过 HTTP 状态码返回了错误信息时，该参数为 true；否则为 undefined 。
err.reqId: string，xhr请求错误的 X-Reqid。
err.code: number，请求错误状态码，只有在 err.isRequestError 为 true 的时候才有效，可查阅码值对应说明。
err.message: string，错误信息，包含错误码，当后端返回提示信息时也会有相应的错误信息。
complete: 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息，具体返回结构取决于后端sdk的配置，
