如何将图片上传到七牛云平台?

JavaScript012

如何将图片上传到七牛云平台?,第1张

上一篇文章介绍了“如何将图片上传到Cloudinary云平台?”

但是由于Cloudinary的服务器在国外,所以上传和读取图片的速度会很慢,不适合用作生产,因此有必要再介绍一下国内广受欢迎的“七牛”云平台。以及分步骤给大家介绍如何使用七牛。

各位可以使用我的邀请链接注册: https://portal.qiniu.com/signup?code=3l7nsvonfkxn6

拜托!!!

我们这里添加的对象存储空间叫做“gougouavatar”

其中的ACCESS_KEY和SECRET_KEY两个参数来自于“个人中心”的“秘钥管理”模块:

_getQiniuToken()返回一个封装promise函数,这个函数调用了后台生成签名算法的接口;

这个函数的回调里拿到了后台生成的key和其他参数;

最后调用_upload方法向七牛的上传图片的接口地址: http://upload.qiniu.com ,发送请求,上传图片;

最后的响应参数response.key即为图片上传成功之后的地址。

如:deae507d-73fd-4489-9d7f-d5fa275bcbe5.jpeg

想要访问该图片,还需拼接上七牛提供的测试域名:

经过测试,使用七牛进行上传的速度确实很快,比国外的cloudinary要快上好几倍,使用体验还是很不错的,大家可以放心使用。

由于公司后台web需要兼容到 IE8 ,对上传图片的模块进行了修改,本来是运用 h5自带的 上传文件方法,但是在 IE8,9 中原生js不支持 input=file ,所以参照了七牛提供的上传方法。

图片上传到七牛需要先获取 token ,开始时没有想到token会失效的问题,通过QA测试发现偶尔会报 七牛Post 401的错误。 今在七牛上传提供方法err的时候在调用一次获取token的方法。

流程:七牛云后台的对象存储功能,nodejs后台生成七牛云的token,前端利用elementUI/ice的upload组件,文件名和token作为参数请求到七牛云后台。

配置已经完成,写接口用的是express,koa同理,主要做法是先接收前端的图片流转换成图片写入本地image文件中,然后再存储到七牛云,再将本地生成的图片删除,需要新建一个image文件夹