七牛云上传图片到七牛云并返回图片URL

鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834

在开发项目的时候，经常会用到上传图片的功能，如果把图片全都存放在项目路径下，会导致项目越来越臃肿，因此可以考虑把图片上传交给第三方处理，此处我们采用七牛云进行图片存储。

一.七牛云准备工作

1.七牛云注册登录

https://portal.qiniu.com/signup/choice

2.新建存储空间

进入对象存储菜单，点击“新建存储空间”，这里需要实名认证，上传身份证正反面之类的，大概一个小时左右就认证成功了，效率真是棒棒哒~

这里的存储空间名称要记住，之后在代码里面会用到。

二.代码实现

1.在pom.xml添加七牛云依赖

我的项目使用了maven管理jar包，所以只需直接添加相应依赖即可：

<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.1.1</version>
</dependency>

2.添加七牛云图片操作工具类

package com.cn.netdisk.util;import java.io.IOException;
import java.util.HashSet;
import java.util.Set;
import java.util.regex.Matcher;
import java.util.regex.Pattern;import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import com.qiniu.util.Base64;
import com.qiniu.util.StringMap;
import com.qiniu.util.UrlSafeBase64;import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;public classQiniuCloudUtil{// 设置需要操作的账号的AK和SKprivate static final String ACCESS_KEY = "你的ACCESS_KEY";private static final String SECRET_KEY = "你的SECRET_KEY";// 要上传的空间private static final String bucketname = "你的空间名称";// 密钥private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);private static final String DOMAIN = "你的图片上传路径";private static final String style = "自定义的图片样式";public String getUpToken() {        return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1));}// 普通上传public String upload(String filePath, String fileName) throws IOException {// 创建上传对象UploadManager uploadManager = new UploadManager();try {// 调用put方法上传String token = auth.uploadToken(bucketname);if(UtilValidate.isEmpty(token)) {System.out.println("未获取到token，请重试！");return null;}Response res = uploadManager.put(filePath, fileName, token);// 打印返回的信息System.out.println(res.bodyString());if (res.isOK()) {Ret ret = res.jsonToObject(Ret.class);//如果不需要对图片进行样式处理，则使用以下方式即可//return DOMAIN + ret.key;return DOMAIN + ret.key + "?" + style;}} catch (QiniuException e) {Response r = e.response;// 请求失败时打印的异常的信息System.out.println(r.toString());try {// 响应的文本信息System.out.println(r.bodyString());} catch (QiniuException e1) {// ignore}}return null;}//base64方式上传public String put64image(byte[] base64, String key) throws Exception{String file64 = Base64.encodeToString(base64, 0);Integer l = base64.length;String url = "http://upload.qiniu.com/putb64/" + l + "/key/"+ UrlSafeBase64.encodeToString(key);      //非华东空间需要根据注意事项 1 修改上传域名RequestBody rb = RequestBody.create(null, file64);Request request = new Request.Builder().url(url).addHeader("Content-Type", "application/octet-stream").addHeader("Authorization", "UpToken " + getUpToken()).post(rb).build();//System.out.println(request.headers());OkHttpClient client = new OkHttpClient();okhttp3.Response response = client.newCall(request).execute();System.out.println(response);//如果不需要添加图片样式，使用以下方式//return DOMAIN + key;return DOMAIN + key + "?" + style;}// 普通删除(暂未使用以下方法，未测试)public void delete(String key) throws IOException {// 实例化一个BucketManager对象BucketManager bucketManager = new BucketManager(auth);// 此处的33是去掉：http://ongsua0j7.bkt.clouddn.com/,剩下的key就是图片在七牛云的名称key = key.substring(33);try {// 调用delete方法移动文件bucketManager.delete(bucketname, key);} catch (QiniuException e) {// 捕获异常信息Response r = e.response;System.out.println(r.toString());}}class Ret {public long fsize;public String key;public String hash;public int width;public int height;}
}

（1）.获取需要操作的账号的AK和SK

private static final String ACCESS_KEY = "你的ACCESS_KEY";
private static final String SECRET_KEY = "你的SECRET_KEY";

进入个人中心-密钥管理

（2）.获取要上传的空间

private static final String bucketname = "你的空间名称";

（3）.获取图片上传URL路径

private static final String DOMAIN = "你的图片上传路径";

（4）.获取自定义的图片样式

private static final String style = "自定义的图片样式";

我这里是需要给图片添加水印，所以自定义了图片样式，如果对于上传图片没有格式要求，则可以跳过此步骤。

将imagestyle的处理接口作为style的值即可。

3.后端代码调用

@ResponseBody@RequestMapping(value="/uploadImg", method=RequestMethod.POST)public ResultInfo uploadImg(@RequestParam MultipartFile image, HttpServletRequest request) {ResultInfo result = new ResultInfo();if (image.isEmpty()) {result.setCode(400);result.setMsg("文件为空，请重新上传");return result;}try {byte[] bytes = image.getBytes();String imageName = UUID.randomUUID().toString();QiniuCloudUtil qiniuUtil = new QiniuCloudUtil();try {//使用base64方式上传到七牛云String url = qiniuUtil.put64image(bytes, imageName);result.setCode(200);result.setMsg("文件上传成功");result.setInfo(url);} catch (Exception e) {e.printStackTrace();}return result;} catch (IOException e) {result.setCode(500);result.setMsg("文件上传发生异常！");return result;}}

4.前端代码调用

我使用的是vue，这里是使用了quillEditor富文本编辑器组件进行图片上传，uploadImg是上传图片调用的方法：

uploadImg: async function(id){  var vm = this;var fileInput = document.getElementById("uniqueId");  var formData = new FormData();formData.append("image", fileInput.files[0]);this.$axios({method: "post",url: '/api/article/uploadImg',data: formData}).then((response) = >{if (response.data.code == 200) {//后端返回的url地址var url = response.data.info;if (url != null && url.length > 0) {   vm.addImgRange = vm.$refs.myQuillEditor.quill.getSelection();var index = vm.addImgRange != null ? vm.addImgRange.index: 0;   vm.$refs.myQuillEditor.quill.insertEmbed(index, 'image', url);  } else {this.$Message.error("图片添加失败！");  }} else {this.$Message.error(response.data.msg);}});
}