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

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包：

        <!-- 阿里云OSS -->
        <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>
    <!-- 引入jquery -->
    <script type="text/javascript" src="/js3/jquery-1.9.1.min.js"></script>
    <!-- 引入bootstrap的css、js -->
    <link rel="stylesheet" href="/js3/bootstrap3/css/bootstrap.css">
    <script type="text/javascript" src="/js3/bootstrap3/js/bootstrap.js"></script>
    <!-- 引入tree的js、css -->
    <link rel="stylesheet" href="/js3/bootstrap-treeview/bootstrap-treeview.min.css">
    <script type="text/javascript" src="/js3/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <!-- 引入选项卡的js、css -->
    <link rel="stylesheet" href="/js3/bootStrap-addTabs/bootstrap.addtabs.css">
    <script type="text/javascript" src="/js3/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
    <!-- 引入table的css、js -->
    <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>
    <!-- 引入时间的css、js -->
    <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>
    <!-- 引入文件上传的css、js -->
    <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的字段就可以展示。

 

完成！