欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中通過minio上傳文件的詳細(xì)步驟

 更新時(shí)間：2022年07月13日 16:18:15   作者：ironManYYDS  
最近項(xiàng)目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡(jiǎn)單寫一下如何通過minio來上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過minio上傳文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

在Vue中minio上傳文件（stream流和鏈接）

1、minio的安裝

直接使用npm或者cnpm下載即可

npm i minio --save
//或者
cnpm i minio --save

2、minio.js文件

封裝了連接minio、文件上傳，文件刪除等方法

注：此文件中的url都是在minio設(shè)置了永久鏈接的基礎(chǔ)上

2.1連接minio

const minioClient = new Minio.Client({
  endPoint: 'xxx.xxx.x.xxx', // 地址
  port: xx, // 端口號(hào)，若地址為類似test.minio.com,就不必寫端口號(hào)
  useSSL: false, // 是否使用ssl
  accessKey: '', // 登錄的accessKey
  secretKey: '' // secretKey
});

2.2通過stream流上傳

const stream = require('stream')
const Minio = require('minio')
import {
  getNowTime
} from "@common/publicmethods"
/**
 *
 * @export 上傳文件（stream流方法）
 * @param {*} backetName String 存儲(chǔ)桶名字
 * @param {*} fileObj Object 文件對(duì)象
 * @param {*} path String 文件存儲(chǔ)路徑
 * @param {*} vm Object 調(diào)用該方法的頁面的this
 * @return {*} null
 */
export function uploadMinIo(backetName,fileObj, path, vm) {
  if (
    fileObj
  ) {
    let file = fileObj;
    console.log("file", file);
    //判斷是否選擇了文件
    if (file == undefined) {
      //未選擇
    } else {
      //選擇
      // 獲取文件類型及大小
      // 給文件名加上當(dāng)前時(shí)間
      const fileName = getNowTime("time") + file.name;
      const fileDate = getNowTime("fileDate") // 生成以日為分類的文件夾
      const mineType = file.type;
      const fileSize = file.size;
      console.log("fileName", fileName);
      //參數(shù)
      let metadata = {
        "content-type": mineType,
        "content-length": fileSize,
      };
      //判斷儲(chǔ)存桶是否存在
      minioClient.bucketExists(backetName, function (err) {
        console.log("判斷儲(chǔ)存桶是否存在");
        if (err) {
          if (err.code == "NoSuchBucket")
            return console.log("bucket does not exist.");
          return console.log(err);
        }
        //準(zhǔn)備上傳
        let reader = new FileReader();
        console.log(reader);
        reader.readAsDataURL(file);
        reader.onloadend = function (e) {
          //讀取完成觸發(fā)，無論成功或失敗
          console.log("ee", e);
          const dataurl = e.target.result;
          //base64轉(zhuǎn)blob
          const blob = toBlob(dataurl);
          //blob轉(zhuǎn)arrayBuffer
          let reader2 = new FileReader();
          reader2.readAsArrayBuffer(blob);
          reader2.onload = function (ex) {
            //定義流
            let bufferStream = new stream.PassThrough();
            //將buffer寫入

            bufferStream.end(Buffer.from(ex.target.result));
            //上傳
            minioClient.putObject(
              backetName,
              `${path}/${fileDate}/${fileName}`,
              bufferStream,
              fileSize,
              metadata,
              function (err, etag) {
                // console.log("dddddd");
                if (err == null) { // 為空則代表上傳成功
                  let res = {
                    path: `http://192.168.0.226:30014/${backetName}/${path}/${fileDate}/${fileName}`,
                    result: 1,
                  };
                  // 成功生成url后調(diào)用
                  // 調(diào)用傳進(jìn)來的this的的方法，然后通過該方法把成功事件發(fā)送出去
                  vm.handleAvatarSuccess(res, vm.filedname);
                  vm.fileName = fileName;
                  vm.$message({
                    message: "上傳成功！",
                    type: "success",
                  });
                  // 由于minio設(shè)置了永久鏈接，該生成臨時(shí)url的方法就不再使用
                  // minioClient.presignedGetObject(
                  //   "medialibrary",
                  //   `archive${a}${fileName}`,
                  //   24 * 60 * 60,
                  //   function (err, presignedUrl) {
                  //     if (err) return console.log(err);
                  //     let res = {
                  //       path: presignedUrl,
                  //       result: 1,
                  //     };
                  //     // 成功生成url后調(diào)用
                  //     vm.handleAvatarSuccess(res, vm.filedname);
                  //     vm.fileName = fileName;
                  //     vm.$message({
                  //       message: "上傳成功！",
                  //       type: "success",
                  //     });
                  //     console.log("鏈接：",presignedUrl);
                  //   }
                  // );
                }
              }
            );
          };
        };
      });
    }
  } else {
    this.$message({
      message: "文件類型錯(cuò)誤！",
      type: "error",
    });
  }
}

2.3通過帶預(yù)簽名的url上傳（最好是minio設(shè)置了鏈接永久訪問）

1.先拿到預(yù)簽名鏈接

2.再通過預(yù)簽名上傳文件

// 兩個(gè)參數(shù)，存儲(chǔ)桶的名字，要上傳文件的名字。例如test.txt
/**
 *
 * @export 獲取上傳鏈接（url方法）獲取上傳的url;會(huì)生成一個(gè)帶預(yù)簽名的鏈接
 * @param {*} bucket String 存儲(chǔ)桶的名字
 * @param {*} totalFolderName String 總文件夾名字 例如:imagelibrary
 * @param {*} fileName String 文件名字
 * @return {*} Promise
 */
export function getUploadUrl(bucket, totalFolderName,fileName) {
  let defaultPath = getNowTime("fileDate"); // 添加默認(rèn)的以日為分類的文件夾
  return minioClient.presignedPutObject(bucket, `${totalFolderName}/${defaultPath}/${fileName}`)
}

// 通過url上傳
/**
 *
 * @export 上傳文件（url方法）通過獲取帶預(yù)簽名的鏈接上傳
 * @param {*} url String 預(yù)簽名鏈接
 * @param {*} data Object 文件對(duì)象
 * @return {*} Promise
 */
export function uploadByUrl(url, data) {
  return fetch(url, {
    mode: "cors", // 解決跨域
    headers: {
      Accept: "application/json,text/plain,/",
    },
    method: "PUT",
    body: data,
  });
}

2.4刪除對(duì)象

/**
 * @export 從存儲(chǔ)桶中刪除一個(gè)對(duì)象
 * @param {*} bucketName 存儲(chǔ)桶的名字
 * @param {*} objectPathAndName 要?jiǎng)h除對(duì)象的路徑（注意：要寫對(duì)路徑，緊跟存儲(chǔ)桶后面的路徑）
 * @description 
 * @author 
 * @version V1.0.0
 * @return {*} Promise
*/
export function removeObject(bucketName,objectPathAndName){
  return minioClient.removeObject(bucketName, objectPathAndName)
}

補(bǔ)充：base64轉(zhuǎn)blob

/**
 *
 * @export base64轉(zhuǎn)blob
 * @param {*} base64Data Object base64數(shù)據(jù)
 * @return {*} blob
 */
//base64轉(zhuǎn)blob
export function toBlob(base64Data) {
  let byteString = base64Data
  if (base64Data.split(',')[0].indexOf('base64') >= 0) {
    byteString = window.atob(base64Data.split(',')[1]) // base64 解碼
  } else {
    byteString = unescape(base64Data.split(',')[1])
  }
  // 獲取文件類型
  let mimeString = base64Data.split(';')[0].split(":")[1] // mime類型

  // ArrayBuffer 對(duì)象用來表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)
  // let arrayBuffer = new ArrayBuffer(byteString.length) // 創(chuàng)建緩沖數(shù)組
  // let uintArr = new Uint8Array(arrayBuffer) // 創(chuàng)建視圖

  let uintArr = new Uint8Array(byteString.length) // 創(chuàng)建視圖

  for (let i = 0; i < byteString.length; i++) {
    uintArr[i] = byteString.charCodeAt(i)
  }
  // 生成blob
  const blob = new Blob([uintArr], {
    type: mimeString
  })
  // 使用 Blob 創(chuàng)建一個(gè)指向類型化數(shù)組的URL, URL.createObjectURL是new Blob文件的方法,可以生成一個(gè)普通的url,可以直接使用,比如用在img.src上
  return blob
}

3、獲取時(shí)間方法

publicmethods.js

/**
 *
 *
 * @export 獲取當(dāng)前時(shí)間并格式化
 * @param {*} isDate Boolean 為真返回時(shí)分秒； 為"time"返回不帶連接符的時(shí)分秒；為"fileDate"返回文件夾日期
 * @return {*} yyyy-MM-dd hh:mm:ss
 */
export function getNowTime(isDate = false) {
    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth(); //得到月份
    var date = now.getDate(); //得到日期
    var hh = now.getHours();
    var mm = now.getMinutes();
    var ss = now.getSeconds();
    var hour = " " + hh + ":" + mm + ":" + ss + ""; //默認(rèn)時(shí)分秒 如果傳給后臺(tái)的格式為年月日時(shí)分秒，就需要加這個(gè)，如若不需要，此行可忽略
    var hours = hh + '' + mm + '' + ss + "-";
    month = month + 1;
    month = month.toString().padStart(2, "0");
    date = date.toString().padStart(2, "0");
    var defaultDate = `${year}-${month}-${date}${hour}`;
    if (isDate) {
        var defaultDate = `${year}-${month}-${date}`;
    }
    if (isDate == 'time') { // 返回給文件前添加的時(shí)間
        var defaultDate = `${year}${month}${date}${hours}`;
    }
    if (isDate == 'fileDate') { // 返回默認(rèn)創(chuàng)建文件夾的時(shí)間
        var defaultDate = `${year}${month}${date}`;
    }
    return defaultDate;
}

4、minio設(shè)置鏈接永久訪問（客戶端）

注意： 在設(shè)置永久訪問后，地址上會(huì)有默認(rèn)的路徑："/minio"，需要把它去掉即可正常訪問

minio設(shè)置永久鏈接訪問

5、解決跨域問題

修改如下文件中的配置

ingress:
  enabled: true
  labels: {}
    # node-role.kubernetes.io/ingress: platform

  annotations:
    kubernetes.io/ingress.class: nginx
    # kubernetes.io/tls-acme: "true"
    # kubernetes.io/ingress.allow-http: "false"
    # kubernetes.io/ingress.global-static-ip-name: ""
    # nginx.ingress.kubernetes.io/secure-backends: "true"
    # nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
    # nginx.ingress.kubernetes.io/whitelist-source-range: 0.0.0.0/0
    nginx.ingress.kubernetes.io/cors-allow-headers: DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,token,Cookie,x-amz-content-sha256,x-amz-date
    nginx.ingress.kubernetes.io/cors-allow-methods: PUT, GET, POST, OPTIONS, DELETE
    nginx.ingress.kubernetes.io/cors-allow-origin: '*'
    nginx.ingress.kubernetes.io/enable-cors: 'true'

6、存儲(chǔ)大小限制問題

加上下面一行就可以了

7、minio官方文檔

官方鏈接

8、minio設(shè)置鏈接永久訪問（其他方法）

minio永久訪問

總結(jié)

到此這篇關(guān)于Vue中通過minio上傳文件的文章就介紹到這了,更多相關(guān)Vue minio上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 深入了解Vue2中的的雙端diff算法

    深入了解Vue2中的的雙端diff算法

    雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文主要來和大家詳細(xì)講講Vue2中的雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下
    2023-02-02
  • 詳解vue中l(wèi)ocalStorage的使用方法

    詳解vue中l(wèi)ocalStorage的使用方法

    這篇文章主要介紹了詳解vue中l(wèi)ocalStorage的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue獲取form表單的值示例

    vue獲取form表單的值示例

    今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue3中Pinia的基本使用筆記

    Vue3中Pinia的基本使用筆記

    Pinia是一個(gè)全新的Vue狀態(tài)管理庫,是Vuex的代替者,尤雨溪強(qiáng)勢(shì)推薦,下面這篇文章主要給大家介紹了關(guān)于Vue3中Pinia的基本使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)

    vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)

    這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問題,需要的朋友可以參考下
    2023-08-08
  • 關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)

    關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)

    這篇文章主要介紹了關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • 解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題

    解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題

    這篇文章主要介紹了解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue-router中的鉤子函數(shù)和執(zhí)行順序說明

    vue-router中的鉤子函數(shù)和執(zhí)行順序說明

    這篇文章主要介紹了vue-router中的鉤子函數(shù)和執(zhí)行順序說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • 詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題

    詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題

    這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue.js中$watch的用法示例

    vue.js中$watch的用法示例

    這篇文章為大家詳細(xì)介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起看看吧。
    2016-10-10

最新評(píng)論