vue中使用minio上传文件

使用Vue和Minio实现OSS客户端及文件上传处理

最新推荐文章于 2025-09-08 08:31:38 发布

原创

最新推荐文章于 2025-09-08 08:31:38 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何在Vue应用中通过getOssClient函数获取并存储OSS（对象存储服务）客户端，以及uploadFile函数实现文件的上传，包括处理上传过程中的错误和成功回调。

创建一个文件getOssClient

import {
   
    getOssSetting } from "@/api/common";
import Vue from "vue";
import {
   
    getCookies, getLocal } from "@/utils/auth"; // get token from cookie
export async function getStsToken() {
   
   
  //从后台获取stsToken
  if (getCookies("token")) {
   
   
    const res = await getOssSetting();
    if (res.code == 200) {
   
   
      Vue.prototype.$ossClient = getClient(res.data);
    }
  }
 
}
export function getClient(data) {
   
   
  const Minio = require('minio');
let endpointes=data.endpoint.indexOf("//")>0?data.endpoint.substring(data.endpoint.indexOf('//')+2,data.endpoint.length):data.endpoint
let endpoints =endpointes.lastIndexOf(':')>0?endpointes.substring(0,endpointes.lastIndexOf(':')):endpointes
let port =Number(data.endpoint.lastIndexOf(':')

最低0.47元/天解锁文章