做了個前后端分離的項目，對于用戶的頭像修改一直不是很滿意，
于是用了Vant4的組件庫改成了文件點擊上傳，先是打算存到本地，了解到七牛云的方便后（主要是免費），決定改成七牛云存儲圖片，記錄一下操作，方便查看復習
目錄
一、七牛云
七牛云簡介
七牛云使用
二、前端vue配置
三、后端springboot配置
一、七牛云
七牛云簡介
七牛云是國內領先的企業(yè)級公有云服務商，致力于打造以數據為核心的場景化PaaS服務。圍繞富媒體場景，七牛先后推出了對象存儲，融合CDN加速，數據通用處理，內容反垃圾服務，以及直播云服務等。
七牛云對象存儲 Kodo 是七牛云提供的高可靠、強安全、低成本、可擴展的存儲服務。您可通過控制臺、API、SDK 等方式簡單快速地接入七牛存儲服務，實現海量數據的存儲和管理。通過 Kodo 可以進行文件的上傳、下載和管理。
總的來說：七牛云是為開發(fā)服務的云存儲環(huán)境，可以在七牛云上托管靜態(tài)文件資源，并且進行下載，還有很多七牛云的sdk。
具體有關七牛云的介紹可以參考開發(fā)文檔：https://developer.qiniu.com/kodo
?
七牛云使用
首先去官網注冊??七牛云
登錄注冊就不再說了，注冊完畢之后，點擊個人中心，進行身份認證
當身份認證完成之后，點左上角創(chuàng)建存儲空間，點這個對象存儲Kodo
?點擊空間管理，新建存儲空間，
讓你輸入空間名稱還有存儲區(qū)域以及訪問控制，按照要求填寫即可
現在就有了一個個人倉庫了，系統(tǒng)會給我們分配一個測試域名，不過這個域名只有30天有效期，我們可以先用這個域名進行測試，后面來綁定自己的域名
點擊空間管理，進入域名管理，即可以添加綁定域名
記住域名一定要是備案域名
二、前端vue配置
這里本人用的是vant4組件
<template>
<van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead"/>
</template>
<script setup lang="ts">
const fileList = ref([
{url: editUser.value.currentValue, isImage: true},
// Uploader 根據文件后綴來判斷是否為圖片文件
// 如果圖片 URL 中不包含類型信息，可以添加 isImage 標記來聲明
]);
console.log(fileList)
const beforeRead = (file: any) => {
console.log(file+'jpg')
if (file.type !== 'image/jpeg') {
Toast('請上傳 jpg 格式圖片');
return false;
}
return true;
};
const afterRead = (file: any) => {
// 返回圖片信息
console.log(file);
const ImgUploadFile = async (params: any) => {
// 要把數據變成file格式
const formData = new FormData(); // 下面有備注
formData.append('file', params);
console.log(formData)
return await myAxios.post('/upload/img', formData, {
headers: {
// 注意修改請求頭file格式
'Content-Type': 'multipart/form-data',
},
});
};
ImgUploadFile(file.file)
editUser.value.currentValue = "你自己的域名/"+ file.file.name;
}
</script>三、后端springboot配置
.在pom.xml添加七牛云依賴
<!--七牛云上傳-->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.11</version>
</dependency>
<!-- 七牛云依賴Gson -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>controller層
@Controller
@RequestMapping("upload")
public class uploadimg {
@PostMapping("/img")
@ResponseBody
public void up1img(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
if (file.isEmpty()) {
return;
}
String fileName = file.getOriginalFilename();
InputStream inputStream = file.getInputStream();
QiniuOssUtils utils = new QiniuOssUtils();
String upload = utils.upload(inputStream, fileName);
System.out.println(upload);
}
}工具類方法，記得換成你自己的AK和CK以及域名
七牛云的配置信息都可以在個人中心拿到，其中AK和SK：點擊密鑰管理
import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
/**
* 七牛OSS管理工具
*/
public class QiniuOssUtils {
/**
* 存儲空間名
*/
private static final String BUCKET = "空間名";
/**
* accessKey和secretKey
*/
private static final String ACCESS_KEY = "AK";
private static final String SECRET_KEY = "CK";
/**
* 外網訪問地址(內置域名有效期只有30天)
*/
private static final String BASE_URL = "域名+/";
/**
* 上傳管理器
*/
private UploadManager upload;
/**
* 桶管理器（存儲空間管理器）
*/
private BucketManager bucket;
public QiniuOssUtils() {
//創(chuàng)建配置對象
Configuration cfg = new Configuration(Zone.zone2());
//創(chuàng)建上傳管理器
upload = new UploadManager(cfg);
//創(chuàng)建存儲空間管理器
bucket = new BucketManager(getAuth(), cfg);
}
/**
* 返回認證器（包含的訪問密鑰）
*
* @return
*/
private Auth getAuth() {
return Auth.create(ACCESS_KEY, SECRET_KEY);
}
/**
* 獲取令牌對象（服務器返回的授權信息）
*
* @return
*/
private String getToken() {
return getAuth().uploadToken(BUCKET);
}
/**
* 文件上傳
*
* @param file
* @return
*/
public String upload(File file, String key) {
try {
return upload(new FileInputStream(file), key);
} catch (FileNotFoundException | QiniuException e) {
e.printStackTrace();
}
return null;
}
/**
* 上傳文件
*
* @param is
* @param key
* @return
* @throws QiniuException
*/
public String upload(InputStream is, String key) throws QiniuException {
//上傳流
Response response = upload.put(is, key, getToken(), null, null);
//解析返回結果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
//將文件的訪問地址返回
return BASE_URL + putRet.key;
}
/**
* 刪除文件
*
* @param key
*/
public void delete(String key) {
try {
bucket.delete(BUCKET, key);
} catch (QiniuException e) {
e.printStackTrace();
}
}
}查看的話，可以在代碼中修改，將圖片路徑存儲到數據庫中，
查看時到數據庫中將路徑查詢出來，返給前端，前端拿到鏈接訪問即可。
最終效果是這樣
?我們也可以來看一下七牛云后臺管理的圖片信息
文章來源：http://www.zghlxwxcb.cn/news/detail-510318.html
?感謝你能看完，如果對你有幫助的話，點個贊支持下文章來源地址http://www.zghlxwxcb.cn/news/detail-510318.html
到了這里，關于springboot+vue項目中如何利用七牛云實現頭像的上傳的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
