servlet 上传图片无法立即刷新显示_mall整合OSS实现文件上传

本文主要讲解mall整合OSS实现文件上传的过程，采用的是服务端签名后前端直传的方式。

SpringBoot实战电商项目mall（25k+star）地址：https://github.com/macrozheng/mall

OSS

阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成本、高可靠的云存储服务。OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。

OSS中的相关概念

• Endpoint：访问域名，通过该域名可以访问OSS服务的API，进行文件上传、下载等操作。
• Bucket：存储空间，是存储对象的容器，所有存储对象都必须隶属于某个存储空间。
• Object：对象，对象是 OSS 存储数据的基本单元，也被称为 OSS 的文件。
• AccessKey：访问密钥，指的是访问身份验证中用到的 AccessKeyId 和 AccessKeySecret。

OSS的相关设置

开通OSS服务

• 登录阿里云官网；
• 将鼠标移至产品标签页，单击对象存储 OSS，打开OSS 产品详情页面；
• 在OSS产品详情页，单击立即开通。

创建存储空间

• 点击网页右上角控制台按钮进入控制台

• 选择我的云产品中的对象存储OSS

• 点击左侧存储空间的加号新建存储空间

• 新建存储空间并设置读写权限为公共读

跨域资源共享（CORS）的设置

由于浏览器处于安全考虑，不允许跨域资源访问，所以我们要设置OSS的跨域资源共享。

• 选择一个存储空间，打开其基础设置

• 点击跨越设置的设置按钮

• 点击创建规则

• 进行跨域规则设置

服务端签名后前端直传的相关说明

流程示例图

流程介绍

1. Web前端请求应用服务器，获取上传所需参数（如OSS的accessKeyId、policy、callback等参数）
2. 应用服务器返回相关参数
3. Web前端直接向OSS服务发起上传文件请求
4. 等上传完成后OSS服务会回调应用服务器的回调接口
5. 应用服务器返回响应给OSS服务
6. OSS服务将应用服务器回调接口的内容返回给Web前端

整合OSS实现文件上传

在pom.xml中添加相关依赖

<!-- OSS SDK 相关依赖 -->

修改SpringBoot配置文件

修改application.yml文件，添加OSS相关配置。

注意：endpoint、accessKeyId、accessKeySecret、bucketName、callback、prefix都要改为你自己帐号OSS相关的，callback需要是公网可以访问的地址。

# OSS相关配置信息
aliyun:
  oss:
    endpoint: oss-cn-shenzhen.aliyuncs.com # oss对外服务的访问域名
    accessKeyId: test # 访问身份验证中用到用户标识
    accessKeySecret: test # 用户用于加密签名字符串和oss用来验证签名字符串的密钥
    bucketName: macro-oss # oss的存储空间
    policy:
      expire: 300 # 签名有效期(S)
    maxSize: 10 # 上传文件大小(M)
    callback: http://localhost:8080/aliyun/oss/callback # 文件上传成功后的回调地址
    dir:
      prefix: mall/images/ # 上传文件夹路径前缀

添加OSS的相关Java配置

用于配置OSS的连接客户端OSSClient。

package 

添加OSS上传策略封装对象OssPolicyResult

前端直接上传文件时所需参数，从后端返回过来。

package 

添加OSS上传成功后的回调参数对象OssCallbackParam

当OSS上传成功后，会根据该配置参数来回调对应接口。

package 

OSS上传成功后的回调结果对象OssCallbackResult

回调接口中返回的数据对象，封装了上传文件的信息。

package 

添加OSS业务接口OssService

package 

添加OSS业务接口OssService的实现类OssServiceImpl

package 

添加OssController定义接口

package 

进行接口测试

测试获取上传策略的接口

启动mall-admin-web前端项目来测试上传接口

• 如何启动前端项目，具体参考该项目的readme文档：https://github.com/macrozheng/mall-admin-web
• 点击添加商品品牌的上传按钮进行测试

• 会调用两次请求，第一次访问本地接口获取上传的策略

• 第二次调用oss服务 的接口进行文件上传

• 可以看到上面接口调用并没有传入回调参数callback,所以接口返回了204 no content,这次我们传入回调参数callback试试，可以发现oss服务回调了我们自己定义的回调接口，并返回了相应结果。

项目源码地址

https://github.com/macrozheng/mall-learning/tree/master/mall-tiny-09

参考资料

• 开通OSS服务：https://help.aliyun.com/document_detail/31884.html?spm=a2c4g.11186623.6.566.74b87eaebrfQno
• 创建存储空间：https://help.aliyun.com/document_detail/31885.html?spm=a2c4g.11186623.6.567.496228bcVZUZqB
• 跨域资源共享（CORS）:https://help.aliyun.com/document_detail/31928.html?spm=5176.11065259.1996646101.searchclickresult.4d1a5607Pf3e9i
• 服务端签名直传并设置上传回调:https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.1268.2c256506mNqV1t