阿里云账号创建步骤和相关设置以及Java代码实现阿里云OSS云存储上传图片

xiaoxiao2022-06-24 183

1.创建阿里云账号进行相关设置：

1.首先需要去阿里云的官网创建一个账号，并进行实名认证，官网地址：https://www.aliyun.com/

2.创建自己的AccessKey ID

(AccessKey ID和AccessKey Secret是您访问阿里云API的密钥，具有该账户完全的权限，请您妥善保管)

3.开通对象存储OSS

4.点击管理控制台：

5.新建Bucket

6.点击文件管理，新建目录

7.新建完成后如图所示：

这样子OSS云存储目录就已经建好了。接下来应用到实际项目中。

2.SpringBoot集成OSS

先简单创建一个SpringBoot项目

application.yml 配置文件：

server: port: 8010 spring: application: name: springcloud-server data: thymeleaf: encoding: UTF-8 servlet: content-type: text/html

创建controller utils 包导入配置类

这个配置类导入会报错，需要导入一个核心jar包

引入核心jar包：

<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>2.7.0</version> </dependency>

配置类：

package com.jk.utils; import com.aliyun.oss.OSSClient; import com.aliyun.oss.model.ObjectMetadata; import com.aliyun.oss.model.PutObjectResult; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.util.StringUtils; import org.springframework.web.multipart.MultipartFile; import java.io.*; import java.net.URL; import java.util.Date; import java.util.Random; public class OSSClientUtil { public static final Logger logger = LoggerFactory.getLogger(OSSClientUtil.class); private String endpoint = "oss-cn-beijing.aliyuncs.com"; // accessKey private String accessKeyId = "**"; //你的AccessKey ID 在网站上！隐私关系我这里无法展示 private String accessKeySecret = "**"; //你的Access Key Secret 隐私关系我这里无法展示 // 空间 private String bucketName = "chenyanbing-storage"; // 文件存储目录 private String filedir = "MyStorage/"; private OSSClient ossClient; public OSSClientUtil() { ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); } /** * 初始化 */ public void init() { ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); } /** * 销毁 */ public void destory() { ossClient.shutdown(); } public void uploadImg2Oss(String url) throws IOException { File fileOnServer = new File(url); FileInputStream fin; try { fin = new FileInputStream(fileOnServer); String[] split = url.split("/"); this.uploadFile2OSS(fin, split[split.length - 1]); } catch (FileNotFoundException e) { throw new IOException("图片上传失败"); } } public String uploadImg2Oss(MultipartFile file) throws IOException { if (file.getSize() > 10 * 1024 * 1024) { throw new IOException("上传图片大小不能超过10M！"); } String originalFilename = file.getOriginalFilename(); String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase(); Random random = new Random(); String name = random.nextInt(10000) + System.currentTimeMillis() + substring; try { InputStream inputStream = file.getInputStream(); this.uploadFile2OSS(inputStream, name); return name; } catch (Exception e) { throw new IOException("图片上传失败"); } } /** * 获得图片路径 * * @param fileUrl * @return */ public String getImgUrl(String fileUrl) { System.out.println(fileUrl); if (!StringUtils.isEmpty(fileUrl)) { String[] split = fileUrl.split("/"); return this.getUrl(this.filedir + split[split.length - 1]); } return "" ; } /** * 上传到OSS服务器如果同名文件会覆盖服务器上的 * * @param instream * 文件流 * @param fileName * 文件名称包括后缀名 * @return 出错返回"" ,唯一MD5数字签名 */ public String uploadFile2OSS(InputStream instream, String fileName) { String ret = ""; try { // 创建上传Object的Metadata ObjectMetadata objectMetadata = new ObjectMetadata(); objectMetadata.setContentLength(instream.available()); objectMetadata.setCacheControl("no-cache"); objectMetadata.setHeader("Pragma", "no-cache"); objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf(".")))); objectMetadata.setContentDisposition("inline;filename=" + fileName); // 上传文件 PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata); ret = putResult.getETag(); } catch (IOException e) { logger.error(e.getMessage(), e); } finally { try { if (instream !=null ) { instream.close(); } } catch (IOException e) { e.printStackTrace(); } } return ret; } public static String getcontentType(String filenameExtension) { if (filenameExtension.equalsIgnoreCase("bmp")) { return "image/bmp"; } if (filenameExtension.equalsIgnoreCase("gif")) { return "image/gif"; } if (filenameExtension.equalsIgnoreCase("jpeg") || filenameExtension.equalsIgnoreCase("jpg") || filenameExtension.equalsIgnoreCase("png")) { return "image/jpeg"; } if (filenameExtension.equalsIgnoreCase("html")) { return "text/html"; } if (filenameExtension.equalsIgnoreCase("txt")) { return "text/plain"; } if (filenameExtension.equalsIgnoreCase("vsd")) { return "application/vnd.visio"; } if (filenameExtension.equalsIgnoreCase("pptx") || filenameExtension.equalsIgnoreCase("ppt")) { return "application/vnd.ms-powerpoint"; } if (filenameExtension.equalsIgnoreCase("docx") || filenameExtension.equalsIgnoreCase("doc")) { return "application/msword"; } if (filenameExtension.equalsIgnoreCase("xml")) { return "text/xml"; } return "image/jpeg"; } /** * 获得url链接 * * @param key * @return */ public String getUrl(String key) { // 设置URL过期时间为10年 3600l* 1000*24*365*10 Date expiration = new Date(System.currentTimeMillis() + 36001 * 1000 * 24 * 365 * 10); // 生成URL URL url = ossClient.generatePresignedUrl(bucketName, key, expiration); if (url != null) { System.out.println(url); return url.toString(); } return ""; } }

创建ImgController类如下：

package com.jk.controller; import com.jk.utils.OSSClientUtil; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; @Controller @RequestMapping("img") public class ImgController { /** * OSS阿里云上传图片 */ @RequestMapping("updaloadImg") @ResponseBody public String uploadImg(MultipartFile imgg)throws IOException { if (imgg == null || imgg.getSize() <= 0) { throw new IOException("file不能为空"); } OSSClientUtil ossClient=new OSSClientUtil(); String name = ossClient.uploadImg2Oss(imgg); String imgUrl = ossClient.getImgUrl(name); String[] split = imgUrl.split("\\?"); //System.out.println(split[0]); return split[0]; } }

写一个PageController路径跳转到前台：

package com.jk.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("page") public class PageController { @RequestMapping("img") public String img(){ return "addimg"; } }

resources下的static引入我们前台所需要的js的一些文件，前台样式我用的是BootStrap(可以加我QQ3367273643要)

引入thymeleaf与前台结合jar包，不引入页面会报404！

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>

前台页面：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title>  <script type="text/javascript" src="/js3/jquery-1.9.1.min.js"></script>  <link rel="stylesheet" href="/js3/bootstrap3/css/bootstrap.css"> <script type="text/javascript" src="/js3/bootstrap3/js/bootstrap.js"></script>  <link rel="stylesheet" href="/js3/bootstrap-treeview/bootstrap-treeview.min.css"> <script type="text/javascript" src="/js3/bootstrap-treeview/bootstrap-treeview.min.js"></script>  <link rel="stylesheet" href="/js3/bootStrap-addTabs/bootstrap.addtabs.css"> <script type="text/javascript" src="/js3/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>  <link rel="stylesheet" href="/js3/bootstrap-table/bootstrap-table.css"> <script type="text/javascript" src="/js3/bootstrap-table/bootstrap-table.js"></script> <script type="text/javascript" src="/js3/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>  <script type="text/javascript" src="/js3/bootbox/bootbox.min.js"></script>  <link rel="stylesheet" href="/js3/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"> <script src="/js3/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script> <script src="/js3/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>  <link rel="stylesheet" href="/js3/bootstrap-fileinput/css/fileinput.css"> <script type="text/javascript" src="/js3/bootstrap-fileinput/js/fileinput.js"></script> <script type="text/javascript" src="/js3/bootstrap-fileinput/js/locales/zh.js"></script> <style type="text/css"> .myrow{ margin-bottom:10px } </style> </head> <body> <form id="Froms"> <div class="row myrow"> <div class="col-md-2"> <label for="imgName">图片名称</label> </div> <div class="col-md-4"> <input type="text" class="form-control" id="imgName" name="imgName"> </div> </div> <div class="row myrow"> <div class="col-md-2"> <label for="headImg">头像</label> </div> <div class="col-md-10" > <input type="text" id="testimg" name="url" /> <input type="file" class="projectfile" name="imgg" id="headImg"> </div> </div> </form> </body> <script> $(function () { uploadImg(); }) function uploadImg(url){ $('#headImg').fileinput({ language: 'zh', //设置语言 uploadUrl: '/img/updaloadImg', //上传的地址,就是我们Controller写的上传的方法。 allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount: 2, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", }).on('fileuploaded', function(event, data, previewId, index) { var imgval = $('#testimg').val(); if(imgval == null || imgval == "" || imgval == undefined){ imgval = data.response.responseText; }/*else{ imgval += ","+"http://<%= request.getServerName()%>:<%=request.getServerPort()%><%=request.getContextPath()%>/"+data.response; }*/ $('#testimg').val(imgval); }); } </script> </html>

项目启动访问路径：

就是这样一个效果：

点击选择我们上传一个图片：

可以看到头像上面的输入框已经显示了图片的地址，这个地址在网站上是可以直接展示的

我们可以把这个地址直接存入数据库就好，展示时直接取img的字段就可以展示。

完成！

专利

最新回复(0)

阿里云账号创建步骤和相关设置 以及Java代码实现阿里云OSS云存储上传图片

1.创建阿里云账号进行相关设置：

2.SpringBoot集成OSS

专利

阿里云账号创建步骤和相关设置以及Java代码实现阿里云OSS云存储上传图片