您现在的位置是:首页 > 文章详情

七牛云存储开发图片上传功能

日期:2019-07-23点击:466

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的配置,
原文链接:https://yq.aliyun.com/articles/710623
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章