上传文件到七牛云返回文件URL地址并保存到数据库

话很少说，直接看效果：🙊

在开发项目的时候，常常会用到上传文件的功能，若是把图片、文件全都存放在业务服务器的项目路径下，会致使项目愈来愈臃肿，所以能够考虑把图片、文件的上传交给第三方处理，最近在作一个项目，须要将PDF文件上传到服务器，在网上了解了一下，发现用得最多的就是采用七牛云进行存储。因而决定折腾折腾~🔨🔍

七牛云官网的介绍：看上去还不错的样子

经过七牛云获取文件资源确实比直接经过本身的业务服务器获取的速度要快得多。并且，已认证我的用户每月免费额度10G的存储空间。这个优惠是每月都有的，最主要仍是免费，😎对于业务量不大的使用场景彻底够用。

七牛云准备工做

七牛云注册登陆：七牛云官网

一、填写相关信息

二、完成注册

七牛云是须要实名认证的，上传身份证正反面之类的，大概一个小时左右就认证成功了，效率真是棒棒哒~ 🙂

三、新建存储空间

进入 对象存储菜单，点击 新建存储空间。

存储空间名称能够随便取，我已经建立过这个存储空间了，这里的 存储空间名称要记住，以后在代码里面会用到~ 存储区域尽可能选择本身产品用户所在区域较多的存储区域。

代码实现

七牛云提供的上传文件的方式有两种：具体可查看 七牛云官方API文档

• 后端上传（服务端直传）：经过客户端，先将文件上传到你项目的服务端，再由服务端上传到七牛云空间

• 前端上传（客户端上传）：经过客户端，由前端js，直接将文件上传到七牛云空间

两种方式均可以完成上传，可是前者还需占用你的业务服务端的带宽来上传文件，而后再由服务端上传到七牛；然后者仅占用客户端的资源，这样能够减轻服务端的压力。

后端上传

由于我是使用Java来实现的，用Java SSM框架来作的上传接口，实现以下：

一、下载七牛云的jar包，可在七牛云的文档中心找到jar包的下载连接 七牛云Java SDK

而后将下载的jar包导入到本身项目里面。

（这里我遇到了一个坑，有些jar包并非必须的，得根据你使用上传文件的方式和文件上传成功以后解析的方式来选择，可是qiniu-java-sdk确定是必须的，并且每一个jar包的版本要对应，不然项目运行时极可能报各类错误！本身折腾了一段时间以后，仍是存在问题，以致于心态差点炸了，后来联系七牛云的客服才知道是最新的sdk的版本不兼容个人Java环境了。🙄）

二、建立七牛云操做工具类QiniuCloudUtil.java

• 进入帐号的管理控制台： 获取七牛云帐号的AK和SK、获取要上传的空间名称（上面建立存储空间名称）、获取文件上传的路径：

• 进入我的中心-密钥管理

• 进入对象存储-选择存储空间-内容管理

这里的外链名需绑定本身的域名，默认有七牛的测试域名~ 还有其余的一些配置：如给图片添加水印、设置样式分隔符等等，根据业务需求自行选择配置与否，如何配置可查看七牛的 配置管理文档

完整的七牛云操做工具类QiniuCloudUtil.java：

点击下载源文件： QiniuCloudUtil.java

该类实现了三种上传文件的方式：

1. 普通上传
2. Base64编码方式上传
3. 字节数组上传

七牛云官网还提供了更多的上传方式，如覆盖上传、数据流上传、断点续传之类的，以及自定义回复内容等等，可自行查看 API

三、后端接口实现（只贴出了核心代码）

控制层UploadController.java：

点击下载源文件： UploadController.java

接口实现层UploadImplement.java：

点击下载源文件： UploadImplement.java

这里使用的是字节数组的方式上传文件，这里也遇到了个坑，文件上传成功了，可是返回的URL地址倒是null，也就是文件的key和hash值没有解析出来，若是是这个缘由，能够尝试将getToken()改成upToken，也就是上传文件的时候从新生成Token，而后问题解决，返回了正确的URL地址~🐵

四、上传测试（使用Postman接口调试工具，上传了一张图片）

图片上传成功，返回的外链地址fielUrl，经过该URL地址就能拿到图片🌝🌚

👇

前端上传

步骤：前端经过服务端获得客户端上传凭证Token，而后再经过七牛云提供的接口进行上传，成功后返回文件的外链地址fileURL。

其实不论是前端上传仍是后端上传都须要七牛云生成的这个Token才能上传文件，那么如何获得这个Token：

获取七牛云Token的方法已经包含在上面的👆七牛云操做工具类 QiniuCloudUtil.java里面。

前端上传代码实现

文首的上传pdf文件并实时预览的效果：

技术栈：前端框架 Vue.js，使用了UI框架Element的 Upload组件 进行文件上传，使用axios请求数据，使用 vue-pdf组件来将pdf文件显示在页面上。

实现该功能的流程是：直接由前端上传pdf文件到七牛云空间，上传文件以前经过本身的业务服务器生成七牛云的Token，将此Token返回给客户端，上传文件时携带这个Token，将文件上传到七牛云，成功以后返回pdf文件的外链URL地址，客户端再将这个URL地址保存到数据库表里，最后获取数据库表里面的fileUrl字段，前端将pdf文件经过vue-pdf组件渲染显示在页面上。

我为何会将返回的URL地址保存到数据库表里呢，这得根据本身的业务场景来考虑，我这里是为了方便统一管理，每次更新文件时只须要将返回的URL地址更新到数据库表里面就OK了。🐔🐧🐦🐤🐒

• axios请求数据： axios

  

• el-upload组件：Upload组件

  

action="upload-z2.qiniup.com" 是必选参数，上传到七牛云的接口地址

根据建立的七牛云存储区域选择上传的接口地址（个人存储区域是华南，因此上传地址是http://upload-z2.qiniup.com）七牛云存储接口地址

前端上传文件的核心代码文件：myresume.vue

点击下载源文件： myresume.vue

上传测试：

总结

这个上传文件到七牛云空间的功能虽然并不复杂，可是我本身在实现的过程当中仍是踩了不少的坑，经过搜索引擎和查看七牛的API文档找到了一些坑的根源，并一步一步的把坑填掉，写这篇文章的目的就是不断的在总结学习到的知识，把学习的知识再总结出来，是对已掌握知识的又一次升华，同时，也但愿其余朋友👬在实现该功能的时候，能够少踩点坑，填坑虽然很痛苦，但每一次填坑都是在不断学习，不断进步！

完整的项目源码不方便贴出来，只贴了实现该功能的核心代码，有任何疑问的朋友👬能够加我微信号：i924721970 联系！若其余大神有更好的使用心得也能够告诉做为菜鸟的我，但愿能和你们交个朋友，一块儿讨论，一块儿学习！

原创不易，转载请注明出处，感谢！👨‍💻

今日寄语：

"全部的幸运，其实都有另外一个名字：努力"

欢迎关注我的微信公众号：桃李报春