基于SSM实现阿里云OSS服务进行图片存储（附源码）

官网地址：https://www.aliyun.com/product/oss

1.注册账号

2.购买服务

oss需要我们付费的有两个地方:

1. 存储，直接4.98购买套餐
2. 流量，按照访问量自动扣费

存储包，直接购买套餐

流量包，上行流量是免费的，下行流量是按照访问量自动扣费的

3.申请秘钥

4.创建存储空间

5.上传图片工具类

//阿里存储工具类
public class OssUtil {

    //==========================下面五项配置修改成自己的========================//
    //区域
    private static String endpoint = "oss-cn-beijing.aliyuncs.com";
    //访问id
    private static String accessKeyId = "自己申请的accessKey";
    //访问秘钥
    private static String accessKeySecret = "自己申请的accessKeySecret";
    //桶名称
    private static String bucketName = "lepeng-movies";
    //访问URL
    private static String url = "https://lepeng-movies.oss-cn-beijing.aliyuncs.com";


    //文件上传
    public static String upload(String fileName, InputStream inputStream) {

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 上传文件流。
        // <yourObjectName>表示上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如 images/2020/11/11/asdf.jpg。
        String objectName = "images/" + new SimpleDateFormat("yyyy/MM/dd").format(new Date())
                + "/" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));

        // meta设置请求头,解决访问图片地址直接下载
        ObjectMetadata meta = new ObjectMetadata();
        meta.setContentType(getContentType(fileName.substring(fileName.lastIndexOf("."))));
        ossClient.putObject(bucketName, objectName, inputStream, meta);

        // 关闭OSSClient。
        ossClient.shutdown();

        return url + "/" + objectName;
    }

    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/jpg";
        }
        return "image/jpg";
    }
}

6.具体实现

html页面

<div id="app">
    <form method="post">
        <input type="file" @change="uploadFile()"/><br>
        <img v-bind:src="this.picPath" alt="" width="300" height="100"/>
    </form>

</div>

js代码

<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {},
        methods: {
            //图片上传
            uploadFile() {
                let formData = new window.FormData();
                formData.append('uploadFile', document.querySelector('input[type=file]').files[0]);
                let options = {  // 设置axios的参数
                    url: "/file/upload",//访问地址
                    data: formData,
                    method: 'post',
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                axios(options).then(resp => {
                    if (resp.data != "") {
                        this.movies.picPath = resp.data;//将图片访问地址记录到movies对象
                    }
                })
            }
    })
</script>

在spring-mvc配置文件引入文件解析器

<!--文件上传解析器-->
<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="104857600"/>
</bean>

对应的controller

@RestController
public class FileController {
    /**
     * 图片上传接口
     * @param uploadFile 一定要跟页面提交变量名称一样
     * @return
     */
    @PostMapping("/file/upload")
    public String uploadFile(MultipartFile uploadFile) throws IOException {
        return OssUtil.upload(uploadFile.getOriginalFilename(), uploadFile.getInputStream());
    }
}

注意：

7. 运行结果

请求发送成功后去OSS管理控制台查看上传图片

8.源码

自行去gitee下载：https://gitee.com/le-peng/image-upload-oss