【OBS】SpringBoot + Vue + el |
您所在的位置：网站首页 › obs是什么的简称 › 【OBS】SpringBoot + Vue + el |
【OBS】SpringBoot + Vue + el
|
华为云OBS的官方文档（链接：https://support.huaweicloud.com/sdk-java-devg-obs/obs_21_0901.html#section1）中关于上传文件的内容，只提供了使用JAVA获取临时上传链接，并使用JAVA创建请求上传纯文本的方法。想要把这部分内容应用到 SpringBoot + Vue + ElementUI/Element-Plus 中，还差很多东西。 文章目录 0 前提条件1 OBS 桶创建和配置1.1 华为云OBS桶的创建1.2 配置桶允许跨域请求1.3 获取桶信息 2 SpringBoot 后端配置2.1 依赖2.2 application.properties 配置2.3 工具类2.4 Controller 3 Vue 前端配置3.1 Vue 组件3.2 upload API3.3 request.js 0 前提条件请先确保SpringBoot、Vue、ElementUI/Element-Plus、axios 等工具安装和配置正确 笔者使用环境：SpringBoot 3.1.0, Vue 3, Element-Plus SpringBoot 2.7 和 Vue 2 按理不会有很大区别，如有需要请自行调整代码 1 OBS 桶创建和配置 1.1 华为云OBS桶的创建可参考如下配置 可参考官方文档：https://support.huaweicloud.com/sdk-browserjs-devg-obs/obs_24_0201.html 其中允许的来源设置为 * 即允许所有跨域请求，也可按如下设置，仅允许当前本地前端访问，其中 8080 为 Vue 前端端口： http://localhost:8080 http://127.0.0.1:8080补充头域 可留空 1.3 获取桶信息后边需要用到的信息有：bucketName、accessKeyId、securitAccessKey、endPoint bucketName： 本文1.1中创建桶时自定义的桶名称； accessKeyId 和 securitAccessKey： 参考官方文档https://support.huaweicloud.com/usermanual-ca/zh-cn_topic_0046606340.html； endPoint：参考下图 application.properties 添加如下配置，值为本文1.3获取的桶信息 huaweicloud.obs.accessKey= huaweicloud.obs.securityKey= huaweicloud.obs.endPoint= huaweicloud.obs.bucketName= huaweicloud.obs.path = 2.3 工具类在 com.gabriel.docsharing.utils 创建如下工具类： package com.gabriel.docsharing.utils; import com.obs.services.ObsClient; import com.obs.services.model.*; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import java.util.HashMap; import java.util.Map; @Slf4j @Component public class HuaweiOBS { @Value("${huaweicloud.obs.accessKey}") private String ak; @Value("${huaweicloud.obs.securityKey}") private String sk; @Value("${huaweicloud.obs.bucketName}") private String bucketName; @Value("${huaweicloud.obs.endPoint}") private String endpoint; // 文件目录 private final String prifix = "/test"; /** * 获取上传地址 * * @param fileName 文件名称 * @param fileType 文件路径 * @return */ public String getUploadUrl(String fileName, FileType fileType) { try { // 创建ObsClient实例 ObsClient obsClient = new ObsClient(ak, sk, endpoint); // URL有效期，3600秒 long expireSeconds = 3600L; Map headers = new HashMap(); headers.put("Content-Type", "application/octet-stream"); String objectName = fileType.getType().concat("/").concat(fileName); TemporarySignatureRequest request = new TemporarySignatureRequest(HttpMethodEnum.PUT, expireSeconds); request.setBucketName(bucketName); request.setObjectKey(objectName); request.setHeaders(headers); TemporarySignatureResponse response = obsClient.createTemporarySignature(request); return response.getSignedUrl(); } catch (Exception e) { log.error("获取上传地址异常：{}", e.getMessage(), e); } return null; } public enum FileType { TEST("test", "测试"), PDF("pdf","PDF文件"); private String type; private String desc; FileType(String type, String desc) { this.type = type; this.desc = desc; } public String getType() { return type; } public String getDesc() { return desc; } } } 2.4 Controller在 com.gabriel.docsharing.controller 创建如下 Controller： package com.gabriel.docsharing.controller; import com.gabriel.docsharing.utils.HuaweiOBS; import lombok.extern.java.Log; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; /** * 前端控制器 * * @author Gabriel * @since 2023-06-08 */ @Log @RestController @RequestMapping("/doc") public class DocController { @Autowired HuaweiOBS huaweiOBS; @RequestMapping(value = "/getUploadUrl", method = RequestMethod.GET) public String getUploadUrl(String filename){ String url = huaweiOBS.getUploadUrl(filename, HuaweiOBS.FileType.TEST); log.info("get upload url, filename: "+ filename + " result: " + url); return url; } } 3 Vue 前端配置 3.1 Vue 组件创建 Upload.vue 文件（请自行设置路由），内容如下： 将文件拖到此处，或点击上传 上传 import {genFileId} from "element-plus"; import {useUploadApi} from "@/api/upload"; export default { name: "Upload", data() { return { uploadUrl: '' } }, methods: { fileChange(file) { // 上传文件发生变化时，根据新文件获取上传链接 if (!this.checkDoc(file)) { this.$refs.upload.clearFiles(); } else { useUploadApi().getUploadUrl(file.name).then((res) => { this.uploadUrl = res; }); } }, handleExceed(files) { // 上传第二个文件时，覆盖第一个文件 if (this.checkDoc(files[0])) { this.$refs.upload.clearFiles() let file = files[0] file.uid = genFileId() this.$refs.upload.handleStart(file) } }, checkDoc(file) { // 文件大小和格式检查 // let index = file.name.lastIndexOf("."); // let extension = file.name.substr(index + 1); // let extensionList = ["jpeg"]; // const isLt2M = file.size / 1024 / 1024 < 1; // if (!isLt2M) { // ElMessage.error("文件不可超出1M"); // return false; // } else if (extensionList.indexOf(extension) < 0) { // ElMessage.error("当前文件格式不支持"); // return false; // } else { // return true; // } return true; }, submitForm() { // 提交上传 this.$refs.upload.submit(); }, uploadAction(param){ // 提交时的自定义上传配置 useUploadApi().uploadFile(this.uploadUrl, param.file).then(res=>{ alert("上传完成，请在检查中查看返回状态") }) }, }, } 3.2 upload API创建 api/upload/index.js 文件，内容如下： import request from '@/utils/request'; /** * 上传文件api接口集合 * @method signIn 用户登录 * @method signOut 用户退出登录 */ export function useUploadApi() { return { getUploadUrl: (filename) => { return request({ url: '/api/doc/getUploadUrl?filename=' + filename, method: 'get' }); }, uploadFile: (url, file) => { return request({ url: url, method: 'put', headers:{'Content-Type': 'application/octet-stream'}, data: file }); } }; } 3.3 request.js创建 utils/request.js 文件，内容如下： import axios from 'axios'; // 创建 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 50000, }); export default service; |
【本文地址】