SpringBoot整合OSS文件上传

我就是我 2024-03-17 20:31 84阅读 0赞

## 一、注册阿里云账号并开通OSS服务 ##

1、登录阿里云账号

![image][]

2、创建一个bucket

![image][image 1]

3、创建子用户

![image][image 2]

对自用户分配权限，打开操作OSS的全部权限（也可根据业务需求进行更改）

![image][image 3]

4、配置上传跨域规则

*  任何来源: \*
 *  允许方法: POST
 *  任何请求头Headers: \*

![image][image 4]

## 二、文件上传方式 ##

### 1、服务器直传方式 ###

每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS

![image][image 5]

和数据直传到OSS相比，以上方法有三个缺点：

*  上传慢：用户数据需先上传到到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用于数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度
 *  扩展性差：如果后续用户多了，应用服务器会成为瓶颈
 *  费用高：需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器

### 2、服务端签名后前端直传 ###

Web前端服务端请求签名，然后前端(Vue)直接上传，不会对服务端产生压力，而且安全可靠。  
相关资料：[服务端签名直传并设置上传回调概述][Link 1]

Java连接实例：[Java实践OSS][Java_OSS]

![image][image 6]

上传回调流程

![image][image 7]

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

### 3、SpringBoot整合OSS实现文件上传 ###

1、在pom.xml中添加相关依赖

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>&lt;dependency&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;groupId&gt;com.aliyun.oss&lt;/groupId&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;artifactId&gt;aliyun-sdk-oss&lt;/artifactId&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;version&gt;3.10.2&lt;/version&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/dependency&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

2、修改SpringBoot配置文件

![image][image 8]

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>#操作oss需要的一些参数</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>aliyun:</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>oss:</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>accessKeyId: xxx # 阿里云的accessKeyId</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>accessKeySecret: xxx # accessKey 密码</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>endPoint: xxx # Endpoint:在阿里云oss控制台查看自己使用的endpoint，eg: oss-cn-shanghai.aliyuncs.com </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>bucketName: xxx # bucket 名称</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>policy:</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>expire: 300 # 签名有效期(S)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>maxSize: 10 # 上传文件大小(M)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>callback: http://localhost:8080/aliyun/oss/callback # 文件上传成功后的回调地址</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>dir:</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>prefix: xxx/images/ # 上传文件夹路径前缀</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

3、添加OSS的相关Java配置  
用于配置OSS的连接客户端的OSSClient

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* TODO 用于配置OSS的连接客户端OSSClient</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @author ss_419</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @version 1.0</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @date 2023/5/28 19:04</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Configuration</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Component</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public class OssConfig { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.endpoint}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_ENDPOINT;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.accessKeyId}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_ACCESSKEYID;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.accessKeySecret}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_ACCESSKEYSECRET;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Bean</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public OSSClient ossClient() { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return new OSSClient(ALIYUN_OSS_ENDPOINT, ALIYUN_OSS_ACCESSKEYID, ALIYUN_OSS_ACCESSKEYSECRET);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
 </tbody> 
</table>

4、封装前端上传策略返回对象  
前端直传时所需要的参数

5、封装上传成功回调参数对象  
当OSS上传成功后，会根据该配置参数来回调对应接口

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>package org.pp.oss.model;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* TODO oss上传成功后的回调参数</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @author ss_419</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @version 1.0</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @date 2023/5/28 19:10</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public class OssCallbackParam { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>//请求的回调地址</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String callbackUrl;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>//回调是传入request中的参数</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String callbackBody;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>//回调时传入参数的格式，比如表单提交形式</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String callbackBodyType;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public String getCallbackUrl() { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return callbackUrl;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public void setCallbackUrl(String callbackUrl) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>this.callbackUrl = callbackUrl;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public String getCallbackBody() { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return callbackBody;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public void setCallbackBody(String callbackBody) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>this.callbackBody = callbackBody;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public String getCallbackBodyType() { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return callbackBodyType;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public void setCallbackBodyType(String callbackBodyType) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>this.callbackBodyType = callbackBodyType;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

6、封装上传成功后回调结果对象  
回调接口中返回的数据对象，封装了上传文件的信息

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* TODO oss上传文件的回调结果</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @author ss_419</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @version 1.0</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @date 2023/5/28 19:14</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public class OssCallbackResult { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String filename;// 文件名称</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String size;// 文件大小</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String mimeType;// 文件的mimeType</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String width;// 图片文件的宽</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String height;// 图片文件的高</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 忽略getter、setter方法</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
 </tbody> 
</table>

7、添加OSS业务接口OssService

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* TODO oss上传管理Service</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @author ss_419</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @version 1.0</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @date 2023/5/28 19:16</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public interface OssService { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* oss上传策略生成</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @return</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssPolicyResult policy();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* oss上传成功回调</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @param request</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @return</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssCallbackResult callback(HttpServletRequest request);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

8、OssService实现类

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>package org.pp.oss.service.impl;/*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>package org.pp.oss.service.impl;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssCallbackResult;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssPolicyResult;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.service.OssService;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import javax.servlet.http.HttpServletRequest;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import cn.hutool.json.JSONUtil;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.OSSClient;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.common.utils.BinaryUtil;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.model.MatchMode;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.model.PolicyConditions;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssCallbackParam;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssCallbackResult;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssPolicyResult;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.service.OssService;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.slf4j.Logger;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.slf4j.LoggerFactory;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.beans.factory.annotation.Autowired;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.beans.factory.annotation.Value;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.stereotype.Service;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import javax.servlet.http.HttpServletRequest;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import java.text.SimpleDateFormat;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import java.util.Date;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* TODO</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @author ss_419</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @version 1.0</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @date 2023/5/28 19:17</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Service</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public class OssServiceImpl implements OssService { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private static final Logger LOGGER = LoggerFactory.getLogger(OssServiceImpl.class);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.policy.expire}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private int ALIYUN_OSS_EXPIRE;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.maxSize}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private int ALIYUN_OSS_MAX_SIZE;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.callback}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_CALLBACK;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.bucketName}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_BUCKET_NAME;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.endpoint}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_ENDPOINT;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Value("${aliyun.oss.dir.prefix}")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private String ALIYUN_OSS_DIR_PREFIX;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Autowired</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private OSSClient ossClient;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* 签名生成</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @return</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Override</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public OssPolicyResult policy() { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssPolicyResult result = new OssPolicyResult();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 存储目录</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String baseDir = ALIYUN_OSS_DIR_PREFIX + sdf.format(new Date());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 签名有效期</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>long expireEndTime = System.currentTimeMillis() + ALIYUN_OSS_EXPIRE * 1000;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>Date expiration = new Date(expireEndTime);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 文件大小</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>long maxSize = ALIYUN_OSS_MAX_SIZE * 1024 *1024;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 回调地址</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssCallbackParam callback = new OssCallbackParam();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>callback.setCallbackUrl(ALIYUN_OSS_CALLBACK);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>callback.setCallbackBody("filename=${object}&amp;size=${size}&amp;mimeType=${mimeType}&amp;height=${imageInfo.height}&amp;width=${imageInfo.width}");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>callback.setCallbackBody("application/x-www-form-urlencoded");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 提交节点</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String action = "https://" + ALIYUN_OSS_BUCKET_NAME + "." + ALIYUN_OSS_ENDPOINT;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>try { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>PolicyConditions policyConds = new PolicyConditions();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,0,maxSize);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>policyConds.addConditionItem(MatchMode.StartWith,PolicyConditions.COND_KEY, baseDir);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>byte[] binaryData = postPolicy.getBytes("utf-8");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String policy = BinaryUtil.toBase64String(binaryData);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String signature = ossClient.calculatePostSignature(postPolicy);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String callbackData = BinaryUtil.toBase64String(JSONUtil.parse(callback).toString().getBytes("UTF-8"));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 返回结果</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setAccessKeyId(ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setPolicy(policy);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setSignature(signature);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setDir(baseDir);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setCallback(callbackData);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setHost(action);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>} catch (Exception e) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>LOGGER.error("签名生成失败{e}", e);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return result;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Override</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public OssCallbackResult callback(HttpServletRequest request) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssCallbackResult result = new OssCallbackResult();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String filename = request.getParameter("filename");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>filename = "http://".concat(ALIYUN_OSS_BUCKET_NAME).concat(".").concat(ALIYUN_OSS_ENDPOINT).concat("/").concat(filename);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setFilename(filename);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setSize(request.getParameter("size"));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setMimeType(request.getParameter("mimeType"));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setHeight(request.getParameter("height"));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>result.setWidth(request.getParameter("width"));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return result;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

9、定义OssController接口

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>package org.pp.oss.controller;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import cn.hutool.json.JSONObject;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.OSS;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.OSSClientBuilder;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.common.utils.BinaryUtil;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.model.MatchMode;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import com.aliyun.oss.model.PolicyConditions;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssCallbackResult;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.model.OssPolicyResult;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.pp.oss.service.OssService;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.beans.factory.annotation.Autowired;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.web.bind.annotation.CrossOrigin;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.web.bind.annotation.RequestMapping;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import org.springframework.web.bind.annotation.RestController;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import javax.servlet.http.HttpServletRequest;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import java.text.SimpleDateFormat;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import java.util.Date;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import java.util.LinkedHashMap;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import java.util.Map;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* TODO Oss相关操作接口</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @author ss_419</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @version 1.0</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @date 2023/5/28 20:43</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@RestController</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@RequestMapping("/aliyun/oss")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@CrossOrigin</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public class AliyunOssController { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@Autowired</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>private OssService ossService;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@CrossOrigin</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@RequestMapping("/policys")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public Map&lt;String,String&gt; policysMap(){ </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String accessId = "xxx";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String accessKey = "xxx";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String endpoint = "oss-cn-shanghai.aliyuncs.com";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 填写Bucket名称，例如examplebucket。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String bucket = "xxx";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 填写Host地址，格式为https://bucketname.endpoint。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String host = "https://" + bucket + "."+ endpoint;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// String callbackUrl = "https://192.168.0.0:8888";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String formatData = dateFormat.format(new Date());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String dir = "osstest/"+formatData+ "/";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 创建ossClient实例。</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>try { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>long expireTime = 30;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>long expireEndTime = System.currentTimeMillis() + expireTime * 1000;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>Date expiration = new Date(expireEndTime);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>PolicyConditions policyConds = new PolicyConditions();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>byte[] binaryData = postPolicy.getBytes("utf-8");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String encodedPolicy = BinaryUtil.toBase64String(binaryData);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>String postSignature = ossClient.calculatePostSignature(postPolicy);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>Map&lt;String, String&gt; respMap = new LinkedHashMap&lt;String, String&gt;();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>respMap.put("accessId", accessId);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>respMap.put("policy", encodedPolicy);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>respMap.put("signature", postSignature);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>respMap.put("dir", dir);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>respMap.put("host", host);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>respMap.put("expire", String.valueOf(expireEndTime / 1000));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return respMap;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// respMap.put("expire", formatISO8601Date(expiration));</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 回调数据</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// JSONObject jasonCallback = new JSONObject();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// jasonCallback.put("callbackUrl", callbackUrl);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// jasonCallback.put("callbackBody",</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// "filename=${object}&amp;size=${size}&amp;mimeType=${mimeType}&amp;height=${imageInfo.height}&amp;width=${imageInfo.width}");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// String base64CallbackBody = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// respMap.put("callback", base64CallbackBody);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>//</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// JSONObject ja1 = JSONObject.fromObject(respMap);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// // System.out.println(ja1.toString());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// response.setHeader("Access-Control-Allow-Origin", "*");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// response.setHeader("Access-Control-Allow-Methods", "GET, POST");</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// response(request, response, ja1.toString());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>} catch (Exception e) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// Assert.fail(e.getMessage());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>System.out.println(e.getMessage());</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return null;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* oss上传签名生成</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @return</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@CrossOrigin</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@RequestMapping("/policy")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public OssPolicyResult policy(){ </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssPolicyResult result = ossService.policy();</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>System.out.println("result = " + result);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return result;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>/**</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* oss上传成功回调</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>* @return</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>*/</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>@RequestMapping("/callback")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>public OssCallbackResult callback(HttpServletRequest request){ </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OssCallbackResult callback = ossService.callback(request);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>System.out.println("callback = " + callback);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return callback;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

对接口进行测试，如下图所示，请求返回了oss文件上传时所需的对应参数

![image][image 9]

### 4、Vue文件上传测试代码 ###

这里为了更加方便快捷的进行文件上传接口的测试，我选择使用Vue+Element-Ui来搭建一个简单的上传案例  
1、创建Vue项目  
在控制台中输入vue ui，启动vue项目图形管理界面

![image][image 10]

访问http://localhost:8000 ，进入如下图操作界面即代表启动成功

![image][image 11]

找到项目管理器，创建一个新Vue项目

![image][image 12]

![image][image 13]

![image][image 14]

![image][image 15]

这里选择Vue2版本

![image][image 16]

创建成功后添加本次案例所需要的依赖：

*  axios：用于对后端服务发起Ajax请求
 *  element-ui：本案例使用到该ui组件库中的Upload，用于文件上传  
    在Vue项目中的main.js中启用对应依赖

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>import Vue from 'vue'</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import App from './App.vue'</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import ElementUI from 'element-ui';</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import 'element-ui/lib/theme-chalk/index.css';</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import axios from "axios";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import VueAxios from "vue-axios";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import router from './router'</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import store from './store'</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>Vue.config.productionTip = false</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// Vue.use(axios)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>Vue.use(VueAxios,axios)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>Vue.use(ElementUI);</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>new Vue({ </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>router,</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>store,</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>render: function (h) { return h(App) }</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}).$mount('#app')</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

创建OssUpload组件，该组件可以在项目中引用

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><code>&lt;template&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;el-upload</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>class="upload-demo"</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>:action="objData.host"</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>:before-upload="ossPolicy"</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>:data="objData"</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>:file-list="fileList"</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>list-type="picture"&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;el-button size="small" type="primary"&gt;点击上传&lt;/el-button&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;div slot="tip" class="el-upload__tip"&gt;只能上传jpg/png文件，且不超过500kb&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/el-upload&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/template&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;script&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>export default { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>data() { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>fileList: [],</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>objData: { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>OSSAccessKeyId: '',</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>policy: '',</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>signature: '',</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>key: '',</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>host: '',</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>dir: ''</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>};</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>},</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>methods: { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>ossPolicy(file) { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>let _self = this;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 在上传前 进行服务器签名</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>return new Promise((resolve, reject) =&gt; { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>this.axios.get("http://localhost:8080/aliyun/oss/policy")</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>.then(response =&gt; { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>console.log(response)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>_self.objData.OSSAccessKeyId = response.data.accessKeyId</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>_self.objData.policy = response.data.policy</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>_self.objData.signature = response.data.signature</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>_self.objData.dir = response.data.dir</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>_self.objData.host = response.data.host+''</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>_self.objData.key = response.data.dir + "${filename}"</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>resolve(true) // 继续上传</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>})</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>.catch(error =&gt; { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>console.log(error)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>reject(false)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>})</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>)</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/script&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;style&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/style&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>在HelloWorld.vue中引用文件上传组件</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>```js</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;template&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;div class="hello"&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;h1&gt;{ { msg }}&lt;/h1&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;OssUpload&gt;&lt;/OssUpload&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/template&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;script&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>// 引用组件</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>import OssUpload from "@/components/OssUpload.vue";</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>export default { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>name: 'HelloWorld',</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>components: {OssUpload},</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>props: { </code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>msg: String</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>}</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/script&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;style &gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>&lt;/style&gt;</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

前后端联调

1.  启动后端服务
    
    ![image][image 17]
2.  启动前端项目
    
    ![image][image 18]

选择文件进行上传，如下图所示即表示上传成功

![image][image 19]

查看对应的OSSBucket，图片已成功存储至OSS服务中

![image][image 20]

[image]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/49e7bab1308f47e4b4b5747839d19f18.png
[image 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1d4622dd366243c7807332cff928cfc5.png
[image 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/7a894772a706408f9fd019762d775f21.png
[image 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b704e9f46a7b4b1a8eebace6e730a97c.png
[image 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/392021fe3d0540d5aeffa3a9c904f754.png
[image 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e68c410b12b545ca963cd7b56bf1c780.png
[Link 1]: https://www.alibabacloud.com/help/zh/object-storage-service/latest/add-signatures-on-the-server-configure-upload-callback-and-directly-transfer-data-overview#concept-qp2-g4y-5db
[Java_OSS]: https://www.alibabacloud.com/help/zh/object-storage-service/latest/add-signatures-on-the-server-configure-upload-callback-and-directly-transfer-data-java#concept-ahk-rfz-2fb
[image 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/59ab47787cf04cbe8f69e38fe4ddfb88.png
[image 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ed85f8276c3145a48fafae8460fdabe0.png
[image 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/06d5f21a1b044ae9aa455d36ccc6c116.png
[image 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3c70df371ca44d0589eb63924f7a9ec7.png
[image 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c43373bb400a4d3a95775508eb076424.png
[image 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4a7ecad9a6cb4653b1b3868898a86271.png
[image 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0260e7cb129544fe8e1db5d34b5f6f0b.png
[image 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/de425d764b3e4335b054c37ae62f6be9.png
[image 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3bcd170cfefa4a58b028db8167f82fab.png
[image 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f9ae4d1c60e542f287a7eaed6645cfe0.png
[image 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c879182d8a4e4f6b80645b5d264455aa.png
[image 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ccbd9df7bb114459abf3e031712adb8b.png
[image 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b21d0233ecc54549a203216bf5ee8a13.png
[image 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8c234bdb6a1a4e11806c449e5c4f8341.png
[image 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/44810c29497f4efca01bedabb3f84b9b.png