上传图片到七牛云并返回图片URL
在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处我们采用七牛云进行图片存储。 一.七牛云准备工作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 class QiniuCloudUtil { // 设置需要操作的账号的AK和SK private 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); } }); } (编辑:北几岛) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |