目錄

• 前端: vue
• • 單文件上傳組件
  • http請求封裝
• 后端SpringBoot
• • pom
  • OSS.yml配置
  • Controller
• 實現效果

前端: vue

單文件上傳組件

<template> <div><el-uploadaction="https://codingce-product.oss-cn-beijing.aliyuncs.com":data="dataObj"list-type="picture":multiple="false" :show-file-list="showFileList":file-list="fileList":before-upload="beforeUpload":on-remove="handleRemove":on-success="handleUploadSuccess":on-preview="handlePreview"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過10MB</div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="fileList[0].url" alt=""></el-dialog></div> </template> <script>import {policy} from './policy'import { getUUID } from '@/utils'export default {name: 'singleUpload',props: {value: String},computed: {imageUrl() {return this.value;},imageName() {if (this.value != null && this.value !== '') {return this.value.substr(this.value.lastIndexOf("/") + 1);} else {return null;}},fileList() {return [{name: this.imageName,url: this.imageUrl}]},showFileList: {get: function () {return this.value !== null && this.value !== ''&& this.value!==undefined;},set: function (newValue) {}}},data() {return {dataObj: {policy: '',signature: '',key: '',ossaccessKeyId: '',dir: '',host: '',// callback:'',},dialogVisible: false};},methods: {emitInput(val) {this.$emit('input', val)},handleRemove(file, fileList) {this.emitInput('');},handlePreview(file) {this.dialogVisible = true;},beforeUpload(file) {let _self = this;return new Promise((resolve, reject) => {policy().then(response => {console.log("響應的數據",response);_self.dataObj.policy = response.data.policy;_self.dataObj.signature = response.data.signature;_self.dataObj.ossaccessKeyId = response.data.accessid;_self.dataObj.key = response.data.dir +getUUID()+'_${filename}';_self.dataObj.dir = response.data.dir;_self.dataObj.host = response.data.host;console.log("響應的數據222。。。",_self.dataObj);resolve(true)}).catch(err => {reject(false)})})},handleUploadSuccess(res, file) {console.log("上傳成功...")this.showFileList = true;this.fileList.pop();this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });this.emitInput(this.fileList[0].url);}}} </script> <style></style>

http請求封裝

import http from '@/utils/httpRequest.js' export function policy() {return new Promise((resolve, reject) => {http({url: http.adornUrl("/thirdparty/oss/polcy"),method: "get",params: http.adornParams({})}).then(({ data }) => {resolve(data);})}); }

后端SpringBoot

導包問題請看這里:解決辦法

pom

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.1.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>cn.com.codingce</groupId><artifactId>gulimall-third-party</artifactId><version>0.0.1-SNAPSHOT</version><name>gulimall-third-party</name><description>第三方服務</description><properties><java.version>1.8</java.version><spring-cloud.version>Hoxton.RELEASE</spring-cloud.version></properties><dependencies><!-- 公眾項目 --><dependency><groupId>cn.com.codingce</groupId><artifactId>gulimall-common</artifactId><version>0.0.1-SNAPSHOT</version><!--排除包--><exclusions><exclusion><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--引入spring-cloud-starter-alicloud-oss--><!--導入失敗，需指定為2.1.0RELEASE穩定版--><dependency><groupId>com.alibaba.cloud</groupId><!--<artifactId>aliyun-oss-spring-boot-starter</artifactId>--><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.1.0.RELEASE</version></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>${spring-cloud.version}</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2.2.2.RELEASE</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>com.alibaba.cloud</groupId><artifactId>aliyun-oss-spring-boot-starter</artifactId><version>1.0.0</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

OSS.yml配置

spring:application:name: gulimall-third-partycloud:nacos:discovery:server-addr: 127.0.0.1:8848alicloud:access-key: "TAAAAAAAAAAAAAAAAAAAAAA"secret-key: "sJxQJEQBIdwadawdawdawfdawda5z"oss:endpoint: "oss-cn-beijing.aliyuncs.com"# 本沒有這個屬性, 自己添加bucket: "codingce-product"logging:level:cn.com.codingce: debugserver:port: 30000

Controller

package cn.com.codingce.thirdparty.controller;import cn.com.codingce.common.utils.R; import com.aliyun.oss.OSS; import com.aliyun.oss.common.utils.BinaryUtil; import com.aliyun.oss.model.MatchMode; import com.aliyun.oss.model.PolicyConditions; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import java.text.SimpleDateFormat; import java.util.Date; import java.util.LinkedHashMap; import java.util.Map;/*** @author mxz*/ @RestController public class OssController {@AutowiredOSS ossClient;@Value("${spring.cloud.alicloud.oss.endpoint}")private String endpoint;@Value("${spring.cloud.alicloud.oss.bucket}")private String bucket;@Value("${spring.cloud.alicloud.access-key}")private String accessId;@RequestMapping("/oss/polcy")public R polcy() {// String accessId = "<yourAccessKeyId>"; // 請填寫您的AccessKeyId。// String accessKey = "<yourAccessKeySecret>"; // 請填寫您的AccessKeySecret。// String endpoint = "oss-cn-hangzhou.aliyuncs.com"; // 請填寫您的 endpoint。// String bucket = "codingce-product"; // 請填寫您的 bucketname 。String host = "https://" + bucket + "." + endpoint; // host的格式為 bucketname.endpoint// callbackUrl為 上傳回調服務器的URL，請將下面的IP和Port配置為您自己的真實信息。//String callbackUrl = "http://88.88.88.88:8888";String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());// String dir = "user-dir-prefix/"; // 用戶上傳文件時指定的前綴。String dir = format + "/"; // 用戶上傳文件時指定的前綴。// 創建OSSClient實例。// OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);Map<String, String> respMap = null;try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject請求最大可支持的文件大小為5 GB，即CONTENT_LENGTH_RANGE為5*1024*1024*1024。PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);respMap = new LinkedHashMap<String, String>();respMap.put("accessid", accessId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));// respMap.put("expire", formatISO8601Date(expiration));} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return R.ok().put("data", respMap);}}

實現效果

前后端分離項目存在跨域問題
可以按照官方文檔給的步驟解決


文章已上傳:https://gitee.com/codingce/hexo-blog
項目地址:https://github.com/xzMhehe/codingce-java

總結

以上是生活随笔為你收集整理的基于前后端分离实现阿里云对象存储小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。