开发者社区> 烟海之蓝> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 1、注册登录七牛云,并实名认证,对象存储控制台,新增bucket存储空间 2、nodejs服务器安装npm install qiniu --save const common = require('.
+关注继续查看

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的配置,

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Minio图片存储
今天的主题是对象储存,对象存储相信大家都不陌生,绝大多数人都使用过比如阿里云七牛云腾讯云的OSS或者开源的轻量级分布式文件系统FastDFS,而今天的主角是Minio,为什么是Minio呢,因为最近的项目里使用了,而且使用感觉还不错,用小又便捷来形容很恰当。所以特地向大家安利一下这款开源的友好的对象存储。
65 0
【TP5.1】对接七牛云上传图片
【TP5.1】对接七牛云上传图片
19 0
开源云存储
本文研究全球及中国市场开源云存储现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美、欧洲、中国、日本、东南亚和印度等地区的现状及未来发展趋势
57 0
一文带你了解云存储网关的计量项和计费项
本文主要介绍云存储网关计费概况,包括计费项和计费方式,您可以通过本文了解云存储网关服务费用收取详情。
1449 0
腾讯云图片上传
示例环境:JDK8+MAVEN3+SSM(Spring+SpringMVC+MyBatis Plus或者MyBatis) 现在比较流行的除了分布式或微服务就是动静分离。 动静分离,以nginx集群为例,nginx通常加载静态资源(js,img,css等)效率相对tomcat等应用服务器效率是非常高的,由其专门处理静态资源,而动态资源,通常由tomcat等应用服务器来处理,应用服务器处理动态资源的效率比nginx处理静态资源效率又要高很多很多。
1853 0
PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例
网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了。研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向。 http://blog.csdn.net/cqcre/article/details/39718689 http://www.tuicool.com/articles/yARFVvQ   首先本篇文章实现的功能如下: 1.利用表单上传功能,用户可以点击选择文件按钮,选择本地的一个文件,同时设定上传的图片的名称,点击上传按钮可以上传并存储到七牛云存储。
1142 0
(转)云存储:阿里云OSS 、又拍云和 七牛 的比较
阿里OSS:好处就是,那是一套完整的体系,存储,数据库,CDN,服务器,阿里都可以给你全包。缺点,费用对于没有盈利的网站来说太高了,好像定位就是给那些高端客户使用的,而且CDN,OSS的流量是分开收费,带宽(2倍成本,呵呵)。
4267 0
云存储:阿里云 和 七牛 的比较
  结论:   阿里云存储 七牛云存储 标准:REST、HTTP 99%符合 50% 基本功能:送二级域名、绑定域名、CDN 支持 支持 自定义文件HTTP header 支持 少量支持 高级服务:图片处理 不提供 很完善地提供 收费策略 收费 小流量免费。
2742 0
+关注
烟海之蓝
程序设计之道,无远弗界,御晨风而返
49
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载