當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue Bootstrap OSS 实现文件上传

發布時間：2024/9/27 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue Bootstrap OSS 实现文件上传小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

公司實現文件上傳技術選型采用后端SpringBoot/Cloud，前端vue Bootstrap ，阿里云OSS作為文件存儲，文件上傳功能單獨抽取封裝文件上傳組件，可供所有的文件的操作。

后端框架版本

SpringBoot	2.5.6
Spring-Cloud	2020.0.4
mysql	8.0.26
pagehelper	1.3.1
Mybatis	2.2.0
Redis	5.0
Fastjson	1.2.78

前端框架版本

Vue	2.6.11
axios	0.24.0
vue-router	3.5.3
Bootstrap	4.6.2

文章目錄

- - - - 一、前端部分
      - 1. 講師頁面
        2. js部分
        3. 文件上傳組件
      - 二、阿里云OSS
      - 2.1. 注冊阿里云
        2.2. 開通OSS
        2.3. 進入管控臺
        2.4. 創建 Bucket
        2.5. 創建OSS用戶
        2.6. OSS權限
      - 三、OSS Client開發文檔
      - 3.1. OSS Client SDK
        3.2. 概述
        3.3. SDK Client
      - 四、后端部分
      - 4.1.依賴引入
        4.2. 配置
        4.3. api接口

一、前端部分

1. 講師頁面

講師頁面作為文件上傳父頁面

2. js部分

3. 文件上傳組件

<template><div><button type="button" v-on:click="selectFile()" class="btn btn-white btn-default btn-round"><i class="ace-icon fa fa-upload"></i>{{text}}</button><input class="hidden" type="file" ref="file" v-on:change="uploadFile()" v-bind:id="inputId+'-input'"></div>a </template><script> export default {name: 'file',props: {text: {default: "上傳文件"},inputId: {default: "file-upload"},suffixs: {default: []},use: {default: ""},afterUpload: {type: Function,default: null},},data: function () {return {}},methods: {uploadFile () {let _this = this;let formData = new window.FormData();let file = _this.$refs.file.files[0];// 判斷文件格式let suffixs = _this.suffixs;let fileName = file.name;let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();let validateSuffix = false;for (let i = 0; i < suffixs.length; i++) {if (suffixs[i].toLowerCase() === suffix) {validateSuffix = true;break;}}if (!validateSuffix) {Toast.warning("文件格式不正確！只支持上傳：" + suffixs.join(","));$("#" + _this.inputId + "-input").val("");return;}// key："file"必須和后端controller參數名一致formData.append('file', file);formData.append('use', _this.use);Loading.show()_this.$api.post(process.env.VUE_APP_SERVER + '/file/admin/oss-simple', formData).then((response) => {Loading.hide()let resp = response.dataconsole.log("上傳文件成功：", resp)//回調父組件函數_this.afterUpload(resp)//解決同一個文件上傳2次或者大于3次，不會發生變化$("#" + _this.inputId + "-input").val("");})},selectFile() {let _this = this// console.log("_this.inputId",_this.inputId)$("#" + _this.inputId + "-input").trigger("click");}}, } </script><style scoped> </style>

二、阿里云OSS

官網：https://www.aliyun.com

2.1. 注冊阿里云

https://account.aliyun.com/register/register.htm

2.2. 開通OSS

2.3. 進入管控臺

2.4. 創建 Bucket

讀寫權限選擇【公共讀】，意思是都可以或者有權限看，沒其他特殊請求，其他的保持默認，點擊確定即可

2.5. 創建OSS用戶

或者

2.6. OSS權限

三、OSS Client開發文檔

https://www.aliyun.com/product/oss

3.1. OSS Client SDK

開發語言java，簡單文上傳

3.2. 概述

3.3. SDK Client

這里就是官網提供的java語言的SDK Client

四、后端部分

https://help.aliyun.com/document_detail/32009.html

4.1.依賴引入

<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency>

4.2. 配置

# 應用名稱 spring.application.name=file # 應用端口 server.port=9003 # 注冊到eureka eureka.client.service-url.defaultZone=http://localhost:8761/eureka# 請求訪問前綴 server.servlet.context-path=/file# 本地存儲靜態文件路徑 file.path=D:/file/imooc/course/ # 訪問靜態文件路徑（用于文件回顯或者文件下載） file.domain=http://127.0.0.1:9000/file/f/# 文件大小（如果搭建大小超過此配置的大小或拋出異常） spring.servlet.multipart.max-file-size=50MB # 請求大小 spring.servlet.multipart.max-request-size=50MB# OSS 配置 oss.accessKeyId=xxx oss.accessKeySecret=xxx oss.endpoint=http://oss-cn-beijing.aliyuncs.com oss.ossDomain=http://bucket名稱.oss-cn-beijing.aliyuncs.com/ oss.bucket=xxx

oss.endpoint 和oss.ossDomain獲取方式
bucket 獲取方式
oss.accessKeyId和oss.accessKeySecret獲取方式

4.3. api接口

package com.course.file.controller;import com.alibaba.fastjson.JSON; import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import com.aliyun.oss.model.AppendObjectRequest; import com.aliyun.oss.model.AppendObjectResult; import com.aliyun.oss.model.ObjectMetadata; import com.aliyun.oss.model.PutObjectRequest; import com.aliyuncs.DefaultAcsClient; import com.aliyuncs.vod.model.v20170321.GetMezzanineInfoResponse; import com.course.server.dto.FileDto; import com.course.server.dto.ResponseDto; import com.course.server.enums.FileUseEnum; import com.course.server.service.FileService; import com.course.server.util.Base64ToMultipartFile; import com.course.server.util.UuidUtil; import com.course.server.util.VodUtil; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource; import java.io.ByteArrayInputStream;@RequestMapping("/admin") @RestController public class OssController {public static final Logger LOG = LoggerFactory.getLogger(OssController.class);public static final String BUSINESS_NAME = "文件上傳";@Value("${oss.accessKeyId}")private String accessKeyId;@Value("${oss.accessKeySecret}")private String accessKeySecret;@Value("${oss.endpoint}")private String endpoint;@Value("${oss.bucket}")private String bucket;@Value("${oss.ossDomain}")private String ossDomain;/*** oss簡單上傳** @param file* @param use* @return* @throws Exception*/@PostMapping("/oss-simple")public ResponseDto fileUpload(@RequestParam MultipartFile file, String use) throws Exception {LOG.info("上傳文件開始");//接收前端的歸屬文件類型 COURSE("C", "課程"), TEACHER("T", "講師");FileUseEnum useEnum = FileUseEnum.getByCode(use);// 為了支持一個文件上傳多次，展示歷史的不同版本，因此上傳文件前，統一添加文件前綴，下載時，統一截取文件沒那個前8位處理String key = UuidUtil.getShortUuid();//獲取文件名String fileName = file.getOriginalFilename();//獲取按照文件類型存儲的目錄String dir = useEnum.name().toLowerCase();//文件存儲目錄拼接 /teacher/1.jpegString path = dir + "/" + key + fileName;// 創建OSSClient實例。OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);// 創建PutObjectRequest對象。//String content = "Hello OSS";// <yourObjectName>表示上傳文件到OSS時需要指定包含文件后綴在內的完整路徑，例如abc/efg/123.jpg。PutObjectRequest putObjectRequest = new PutObjectRequest(bucket, path, new ByteArrayInputStream(file.getBytes()));// 如果需要上傳時設置存儲類型與訪問權限，請參考以下示例代碼。// ObjectMetadata metadata = new ObjectMetadata();// metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());// metadata.setObjectAcl(CannedAccessControlList.Private);// putObjectRequest.setMetadata(metadata);// 上傳字符串ossClient.putObject(putObjectRequest);// 關閉OSSClientossClient.shutdown();;ResponseDto responseDto = new ResponseDto();FileDto fileDto = new FileDto();fileDto.setPath(ossDomain + path);responseDto.setContent(fileDto);return responseDto;} }

總結

以上是生活随笔為你收集整理的Vue Bootstrap OSS 实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Elasticsearch7.15.2
下一篇： springboot elasticse