项目中会用到大量的图片和小视频,为了分担服务器压力,将文件都放在七牛云。这里的思路很简单,
就是移动端、pc端把文件上传到服务器,服务器做一个临时缓存,保存必要的信息到数据库后,
将文件上传到七牛云,最后删除服务器的缓存。当然,也可以直接让移动端、pc端把文件上传到七牛云,
七牛云在返回信息给服务器,这种方法虽然更佳,但是敲起代码来有点麻烦,复杂。
首先我们得到七牛云官网创建属于自己的空间
实名认证最后有大内存
登陆官网申请账号,然后建立对象储存空间Bucket 。
作为练习建立公开空间即可
若建立私有的将采取支付宝授权,授权后受到如下邮件信息
之后进入建立的空间则能看见相关信息
前期的准备工作大致就完成了。
本文章以Maven为Demo
在pom.xml中我们需要引入SDK
<!-- 七牛云 --> <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>7.1.1</version> </dependency>
然后我们创建一个七牛云工具类
package com.dz147.Util; import com.qiniu.common.QiniuException; import com.qiniu.http.Response; import com.qiniu.storage.UploadManager; import com.qiniu.util.Auth; import java.io.IOException; public class QiniuUtil { //设置需要操作的账号的AK和SK private static final String ACCESS_KEY = ""; private static final String SECRET_KEY = ""; //要上传的空间 private static final String bucketname = "picturestorage"; //密钥 private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); //普通上传 public void upload(String filePath, String fileName) throws IOException { //创建上传对象 UploadManager uploadManager = new UploadManager(); try { //调用put方法上传 Response res = uploadManager.put(filePath, fileName, auth.uploadToken(bucketname)); //打印返回的信息 System.out.println(res.bodyString()); } catch (QiniuException e) { Response r = e.response; // 请求失败时打印的异常的信息 //System.out.println(r.toString()); try { //响应的文本信息 System.out.println(r.bodyString()); } catch (QiniuException e1) { //ignore } } } }
查看密匙
使用是这么一个思路首先前端我们传一个文件到后台(以添加图片为例)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <form method="post" enctype="multipart/form-data"> 选择要上传的文件:<br/> <input type="file" name="file" id="myFile"/><span></span> </form> <div id="bar"> 上传进度: <progress id="pro" value="0"></progress> </div> <input type="button" id="upLoadSub" value="上传"/> <div> <img src="" alt="GG" id="myImg" width="200" height="160"/> </div> </body> <script src="../js/jquery.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var myFile = document.getElementById("myFile"); //绑定事件(ECMAScript6写法) myFile.addEventListener("change", () => { var file = myFile.files[0]; //预览图片函数 previewWithObjectURL(file); }) //点击->图片上传 //axios轻量级 ajax API $("#upLoadSub").on("click", function () { var myFile = document.getElementById("myFile"); var formData = new FormData(); formData.append("file", myFile.files[0]); axios({ method: 'post', url: '/addQiniu', data: formData }).then(function (response) { console.log(response.data); }).catch(console.error); }); //简单的图片预览建议使用第一种方式 //URL方式(第一种方式)src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10 function previewWithObjectURL(file) { var url = URL.createObjectURL(file); var reader = new FileReader(); reader.readAsDataURL(file); //请求完成后,显示图片 reader.onloadend = function (event) { document.getElementById("myImg").src = url; } //上传过程中动态显示进度条 reader.onprogress = function (event) { if (event.lengthComputable) { document.getElementById("pro").value = event.loaded / event.total; } } } </script> </html>
先把文件添加到image目录里
添加到后台服务器得到文件资源再往七牛云添加。
//Controller部分 @RequestMapping(value = "/addQiniu", method = RequestMethod.POST, produces = "application/json;charset=utf-8;") public @ResponseBody String qiniuyunAdd(MultipartFile file, Model model, HttpServletRequest request) { String realPath = request.getServletContext().getRealPath(File.separator + "imges"); String qiniuPath = ""; try { //上传文件方法返回重命名,文件名称 String s = excels.upLoadImg(file, realPath); //添加成功后的绝对路径 String thisPath = realPath + File.separator + s; //组合七牛云外链(七牛云生成域名+保存的文件KEY) qiniuPath = "http://pjv3h15g0.bkt.clouddn.com/" + s; QiniuUtil qiniuUtil = new QiniuUtil(); //添加到七牛云 qiniuUtil.upload(thisPath, s); System.out.println(s + ",项目文件路径:" + thisPath + ",七牛云存储路径:" + qiniuPath); File file1 = new File(thisPath); if (file1.isFile()) { //删除服务器图片 file1.delete(); } } catch (IOException e) { e.printStackTrace(); } return qiniuPath; }
服务器添加图片的相关API
@Override public String upLoadImg(MultipartFile file, String path) throws IOException { ArrayList<String> strings = new ArrayList<>(); if (file.isEmpty()) { strings.add("请选择文件!"); } //得到文件的类型 String fileType = file.getContentType(); //第一种方式Arrays.asList("image/jpeg","image/png") if (!fileType.contains("image/")) { strings.add("只允许上传图片!"); } //只允许上传的图片小于5MB log.info(file.getSize()); if (file.getSize() > 1024 * 1024 * 1024 * 5) { strings.add("只允许上传5M的图片!"); } String fileName = ""; String[] formatName = getFormatName(file.getOriginalFilename()); file.transferTo(new File(path + File.separator + formatName[0] + formatName[1] + formatName[2])); //得到图片的相对路径 fileName = formatName[0] + formatName[1] + formatName[2]; if (strings.size() > 0) { fileName = ""; fileName = strings.get(0); } return fileName; } public String[] getFormatName(String fileName) { //设置日期格式yyyy-MM-dd SimpleDateFormat df = new SimpleDateFormat("_yyyyMMddHHmmss"); // new Date()为获取当前系统时间 String now = df.format(new Date()); //获得文件名去掉后缀 String prefix = fileName.substring(0, fileName.lastIndexOf(".")); //得到文件后缀带. String postfix = fileName.substring(fileName.lastIndexOf(".")); return new String[]{prefix, now, postfix}; }
结合自身需求的总结