springboot+vue實現(xiàn)oss文件存儲的示例代碼
前提oss準備工作
進入阿里云官網(wǎng):阿里云oss官網(wǎng)
注冊

搜OSS,點擊“對象存儲OSS”
第一次進入需要開通,直接點擊立即開通,到右上角AccessKey管理中創(chuàng)建AccessKey,并且記住自己的accessKeyId和accessKeySecret,因為之后要用到,如果現(xiàn)在不記之后就會被隱藏


點擊右上角進入自己賬號主頁,鼠標移到左上角三條杠會有側(cè)邊欄彈出,找到對象存儲OSS,開通后,創(chuàng)建Bucket。名稱和地域自己填寫和選擇,其他默認不變,讀寫權(quán)限為“公共讀”,其余默認即可


添加依賴
阿里云的oss依賴
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.15.1</version>
</dependency>
AliOSS工具類
package com.wedu.modules.tain.utils;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;
/**
* 阿里云 OSS 工具類
*/
@Data
@ConfigurationProperties(prefix = "aliyun3.oss")
@Component
public class AliOSSUtil {
// 這些成員變量等會在配置項中設置
private String endpoint;
private String accessKeyId;
private String accessKeySecret;
private String bucketName;
/**
* 實現(xiàn)上傳圖片到OSS
*/
public String upload(MultipartFile file) throws IOException {
// 獲取上傳的文件的輸入流
InputStream inputStream = file.getInputStream();
// 避免文件覆蓋(一面文件重名時,上傳失敗)
String originalFilename = file.getOriginalFilename();
String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
//上傳文件到 OSS
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, fileName, inputStream);
//文件訪問路徑
String url = endpoint.split("http://")[0] + "http://" + bucketName + "." + endpoint.split("http://")[1] + "/" + fileName;
// 關閉ossClient
ossClient.shutdown();
return url;// 把上傳到oss的路徑返回
}
}
controller類:接收請求,返回文件路徑
@Autowired
private AliOSSUtil aliOSSUtil;
//oss
@PostMapping("/ossUpload")
public R ossUpload(MultipartFile file) throws IOException {
String url = aliOSSUtil.upload(file); // 返回文件的上傳路徑,訪問這個url即可下載
return R.ok().put("url",url);
}
更新application.yml配置
# 阿里云OSS配置 wyj配置
aliyun3:
oss:
endpoint: http://見下文解說
accessKeyId: 自己的KeyId
accessKeySecret: 自己的KeySecret
bucketName: 創(chuàng)建的bucket的名稱
外網(wǎng)訪問的那個東東復制在http:后面就行

postman測試
測試成功

列表里也有剛剛上傳的數(shù)據(jù)

vue
首先在頁面上寫一個文件上傳按鈕,點擊則彈出彈窗,彈窗內(nèi)再繼續(xù)寫文件上傳
<template>
<div>
<el-form :inline="true">
<el-form-item>
<el-button
type="primary"
@click="fileUpload()"
>文件上傳</el-button
>
</el-form-item>
</el-form>
<file-upload v-if="fileUploadVisible" ref="FileUpload"></file-upload>
</div>
</template>
<script>
import FileUpload from "./warn-file-upload";
export default {
data() {
return {
fileUploadVisible:false
};
},
components: {
FileUpload,
},
methods: {
fileUpload(){
this.fileUploadVisible = true;
this.$nextTick(() => {
this.$refs.FileUpload.init();
});
},
},
};
</script>
<style>
</style>
彈窗內(nèi)寫一個下拉選擇框,后續(xù)還會寫本地存儲以及minio
<template>
<el-dialog
title="文件傳輸"
:visible.sync="visible"
:close-on-click-modal="false"
>
<el-select v-model="value" placeholder="請選擇存儲方式">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-upload
class="upload-demo"
drag
:action="getUploadAction(this.value)"
:headers="tokenInfo"
multiple
:disabled="!this.value"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處,或<em>點擊上傳</em></div>
<div class="el-upload__tip" slot="tip">
請先選擇上傳方式再進行文件上傳
</div>
</el-upload>
</el-dialog>
</template>
<script>
export default {
data() {
return {
ossUpload: this.$http.adornUrl("/tain/warn/ossUpload"),
tokenInfo: {
token: this.$cookie.get("token"),
},
visible: true,
options: [
{
value: "1",
label: "本地存儲",
},
],
value: "",
};
},
methods: {
init() {
this.visible = true;
this.$nextTick(() => {
this.value = "";
});
},
getUploadAction(value) {
if (value == 1) {
return this.ossUpload;
} else if (value == "") {
return this.value;
}
},
},
};
</script>
<style>
</style>到此這篇關于springboot+vue實現(xiàn)oss文件存儲的示例代碼的文章就介紹到這了,更多相關springboot oss文件存儲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Springboot集成JUnit5優(yōu)雅進行單元測試的示例
這篇文章主要介紹了Springboot集成JUnit5優(yōu)雅進行單元測試的示例,幫助大家更好的理解和使用springboot框架,感興趣的朋友可以了解下2020-10-10
java調(diào)用python代碼的兩種實現(xiàn)方式:Runtime.exec()和Jython
在Java中調(diào)用Python代碼有多種方法,包括使用Runtime.exec()和第三方庫如Jython,Runtime.exec()通過系統(tǒng)命令執(zhí)行Python腳本,適用于簡單的調(diào)用場景,Jython則是一個Python的Java實現(xiàn),允許在Java中直接運行Python代碼,適用于更深層次的集成需求2025-01-01
Java BufferedWriter BufferedReader 源碼分析
本文是關于Java BufferedWriter ,BufferedReader 簡介、分析源碼 對Java IO 流深入了解,希望看到的同學對你有所幫助2016-07-07

