快捷導(dǎo)航

springboot+vue實(shí)現(xiàn)oss文件存儲(chǔ)的示例代碼

更新時(shí)間：2024年02月29日 12:04:32 作者：今年不養(yǎng)豬只除草

對(duì)象存儲(chǔ)服務(wù)是一種海量、安全、低成本、高可靠的云存儲(chǔ)服務(wù),本文主要介紹了springboot+vue實(shí)現(xiàn)oss文件存儲(chǔ)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下

前提oss準(zhǔn)備工作

進(jìn)入阿里云官網(wǎng)：阿里云oss官網(wǎng)

注冊(cè)

在這里插入圖片描述

搜OSS，點(diǎn)擊“對(duì)象存儲(chǔ)OSS”

第一次進(jìn)入需要開(kāi)通，直接點(diǎn)擊立即開(kāi)通，到右上角AccessKey管理中創(chuàng)建AccessKey，并且記住自己的accessKeyId和accessKeySecret，因?yàn)橹笠玫?，如果現(xiàn)在不記之后就會(huì)被隱藏

在這里插入圖片描述

點(diǎn)擊右上角進(jìn)入自己賬號(hào)主頁(yè)，鼠標(biāo)移到左上角三條杠會(huì)有側(cè)邊欄彈出，找到對(duì)象存儲(chǔ)OSS，開(kāi)通后，創(chuàng)建Bucket。名稱和地域自己填寫(xiě)和選擇，其他默認(rèn)不變，讀寫(xiě)權(quán)限為“公共讀”，其余默認(rè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 {
    // 這些成員變量等會(huì)在配置項(xiàng)中設(shè)置
    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;

    /**
     * 實(shí)現(xiàn)上傳圖片到OSS
     */
    public String upload(MultipartFile file) throws IOException {
        // 獲取上傳的文件的輸入流
        InputStream inputStream = file.getInputStream();

        // 避免文件覆蓋（一面文件重名時(shí)，上傳失?。?
        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);

        //文件訪問(wèn)路徑
        String url = endpoint.split("http://")[0] + "http://" + bucketName + "." + endpoint.split("http://")[1] + "/" + fileName;
        // 關(guān)閉ossClient
        ossClient.shutdown();
        return url;// 把上傳到oss的路徑返回
    }

}

controller類：接收請(qǐng)求，返回文件路徑

    @Autowired
    private AliOSSUtil aliOSSUtil;
    //oss
    @PostMapping("/ossUpload")
    public R ossUpload(MultipartFile file) throws IOException {
        String url = aliOSSUtil.upload(file);  // 返回文件的上傳路徑，訪問(wèn)這個(gè)url即可下載
        return R.ok().put("url",url);
    }

更新application.yml配置

# 阿里云OSS配置 wyj配置
aliyun3:
  oss:
    endpoint: http://見(jiàn)下文解說(shuō)
    accessKeyId: 自己的KeyId
    accessKeySecret: 自己的KeySecret
    bucketName: 創(chuàng)建的bucket的名稱

外網(wǎng)訪問(wèn)的那個(gè)東東復(fù)制在http:后面就行

在這里插入圖片描述

postman測(cè)試

測(cè)試成功

在這里插入圖片描述

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

在這里插入圖片描述

vue

首先在頁(yè)面上寫(xiě)一個(gè)文件上傳按鈕，點(diǎn)擊則彈出彈窗，彈窗內(nèi)再繼續(xù)寫(xiě)文件上傳

<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)寫(xiě)一個(gè)下拉選擇框，后續(xù)還會(huì)寫(xiě)本地存儲(chǔ)以及minio

<template>
    <el-dialog
      title="文件傳輸"
      :visible.sync="visible"
      :close-on-click-modal="false"
    >
      <el-select v-model="value" placeholder="請(qǐng)選擇存儲(chǔ)方式">
        <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>點(diǎn)擊上傳</em></div>
        <div class="el-upload__tip" slot="tip">
          請(qǐng)先選擇上傳方式再進(jìn)行文件上傳
        </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: "本地存儲(chǔ)",
          },
        ],
        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>

到此這篇關(guān)于springboot+vue實(shí)現(xiàn)oss文件存儲(chǔ)的示例代碼的文章就介紹到這了,更多相關(guān)springboot oss文件存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: