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

純前端使用Vue3上傳文件到minio文件服務(wù)器(粘貼可直接用)

 更新時(shí)間：2024年04月03日 09:55:19   作者：老是寫B(tài)ug  
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、首先安裝minio的插件，因?yàn)槲沂褂玫膙ue3，不支持模塊化的導(dǎo)入，所以我們使用一個(gè)別人寫好的vue2的包

npm install --save minio-js

2、在需要上傳文件的頁(yè)面導(dǎo)入這個(gè)包

import { Minio } from "minio-js";

3、創(chuàng)建一個(gè)minio的客戶端

 minioClient = new Minio.Client({
      endPoint: '192.168.1.111', // minio的ip，直接替換自己的即可
      port: 9000, // 端口號(hào)，若地址為類似test.minio.com,就不必寫端口號(hào)
      useSSL: false, // 是否使用ssl
      accessKey: accessKey, // 登錄的accessKey
      secretKey: secretKey,
      sessionToken: token,
    });

這里說(shuō)明一下，accessKey、secretKey、sessionToken都是通過接口獲取到的臨時(shí)憑證

4、通過帶預(yù)簽名的url上傳，首先我們需要獲取到這個(gè)url,minioAPI提供了， minioClient.presignedPutObject可以獲取帶簽名的URL

function uploadByUrl(url, data) {
  loadding.value = true;
  return fetch(url, {
    mode: "cors", // 解決跨域
    headers: {
      Accept: "application/json,text/plain,/",
    },
    method: "PUT",
    body: data,//data就是文件對(duì)象
  }).then((response) => {
    if (response.ok) {
      // 處理成功的情況
      loadding.value = false;
      proxy.$modal.msgSuccess("上傳成功");
    } else {
      // 處理失敗的情況
      proxy.$refs["my-upload"].clearFiles();
      throw new Error("上傳失敗，請(qǐng)重新上傳！");
    }
  });
}

//獲取上傳的URL
minioClient.presignedPutObject(
    bucketName,//桶名稱
    fileName,//文件名稱
    1000 * 60 * 5,//URL有效期
    function (err, presignedUrl) {//錯(cuò)誤的回調(diào)方法
      if (err) return console.log(err);
      let url = presignedUrl;
      uploadByUrl(url, fileObj.value);
    }
  );

總結(jié) 

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

相關(guān)文章

最新評(píng)論