vue中使用minio上传文件

创建一个 文件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?data.endpoint.substring(data.endpoint.lastIndexOf(':')+1,data.endpoint.length):80)
let minio={
  endPoint: endpoints,  //文件服务器地址
  port:port,//文件服务器端口
  useSSL: false,
  accessKey: data.accessKey,// 文件服务器账号
  secretKey: data.secretKey, // 文件服务器密码 
  bucket:data.bucketName, 
  sessionToken:data.securityToken,
  fileKey:data.fileKey
}
Vue.prototype.$minioInfo = minio;
const minioClient = new Minio.Client(minio)
  return minioClient;
}

getStsToken()

上传组件中使用 打开上传就会拿到key
在这里插入图片描述


 async handleUploadFile(e) {
      this.uploadArr.push(e);
      if (!this.btnLoading) {
        this.btnLoading = true;
        this.$emit("uploaded", true);
      }
      if (this.isUploading) {
        this.progressFlag = true
        this.loadProgress = 35
        this.isUploading = false;
        const upload = (e) => {
          uploadFile(e.file, e.file.name, this.$ossClient,this.$minioInfo)
            .then((res) => {
              
              this.loadProgress = 100
              this.progressFlag = false
              this.btnLoading = false;
              let newItem = this.addType({ ...res });
              
              this.previewImgList.push(newItem);
              this.isUploading = true;
              if (this.previewImgList.length < this.uploadArr.length) {
                let item = this.uploadArr[this.previewImgList.length];
                upload(item);
              } else {
                this.$emit("uploaded", false);
                this.btnLoading = false;
                this.$emit("uploadSuccess", this.previewImgList);
              }
              
            })
            .catch(() => {
              this.$emit("uploaded", false);
              this.btnLoading = false;
              this.isUploading = true;
              this.loadProgress = 0
              this.progressFlag = false
            });
        };
        upload(e);
      }
    },
// 上传文件
export function uploadFile(f , fileName, client,minioInfo) {
  try {
    let suffix = fileName.substr(fileName.lastIndexOf("."));
    let num = getNum(6, 10);
    let storeAs = suffix.substr(1) + "/" + new Date() * 1 + "/" + num + suffix;
      let reader = new FileReader();
      reader.readAsArrayBuffer(f);
      return new Promise((resolve, reject) => {
        reader.onload = function (e) {
          let res = e.target.result;//ArrayBuffer
          let buf = Buffer.from(res);//Buffer 
          const metaData = {
            'content-type': f.type,
            'content-length': f.size
          }
          return   client.putObject(minioInfo.bucket, storeAs, buf, f.size, metaData,function (err, data) {
            if (err){
              myMessage({
                message: err,
                type: "error",
                duration: 5 * 1000,
              });
            }else{
              let obj = {};
              obj.fileKey = storeAs;
              obj.originalName = fileName
              let urls=minioInfo.endPoint.indexOf("//")>0?minioInfo.endPoint:('http://'+minioInfo.endPoint)
              obj.url =  `${urls}:${minioInfo.port}/${minioInfo.bucket}/${storeAs}`;
              resolve(obj)
            }
          });
        }
      })
  } catch (e) {
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/258449.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

澳鹏干货解答!“关于机器学习的十大常见问题”

探索机器学习的常见问题&#xff0c;了解机器学习和人工智能的基本概念、原理、发展趋势、用途、方法和所需的数据要求从而发掘潜在的商机。 什么是机器学习&#xff1f; 机器学习即教授机器如何学习的过程&#xff0c;为机器提供指导&#xff0c;帮助它们自己开发逻辑&#…

STM32G030C8T6:使用按键控制LED亮灭(外部中断)

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;通过KEY1 按键的PA0 引脚配置成中断输入引脚&#xff0c;PB9引…

SSH的交互原理(wireshark的分析)

SSH的交换原理&#xff08;wireshark篇&#xff09; 首先要想了解ssh的交换原理&#xff0c;必须要先了解他的加密方式&#xff0c;他的加密方式是对称加密&#xff0c;和公钥加密。什么意思呢&#xff1f; 首先我们向服务器发送一个请求&#xff0c;然后服务器会发给我们他的…

【Linux】进程周边006之进程地址空间

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.程序地址空间 1.1验证地址…

LeetCode 每日一题 Day 17 || 二分

1901. 寻找峰值 II 一个 2D 网格中的 峰值 是指那些 严格大于 其相邻格子(上、下、左、右)的元素。 给你一个 从 0 开始编号 的 m x n 矩阵 mat &#xff0c;其中任意两个相邻格子的值都 不相同 。找出 任意一个 峰值 mat[i][j] 并 返回其位置 [i,j] 。 你可以假设整个矩阵周…

怎么检测DC-DC电源模块稳定性?电源测试系统测试有什么优势?

DC-DC电源模块稳定性测试 稳定性是衡量DC电源模块的重要指标&#xff0c;电源模块的稳定性直接影响着电源产品和设备的工作稳定性。DC-DC电源模块的稳定性&#xff0c;可以通过检测输出电压、输出电流、负载、波形、效率等参数来评估。 1. 静态测试方法 静态测试是通过直流电压…

sparksql介绍

1.1 SparkSQL介绍 SparkSQL&#xff0c;顾名思义&#xff0c;就是Spark生态体系中的构建在SparkCore基础之上的一个基于SQL的计算模块。 SparkSQL的前身不叫SparkSQL&#xff0c;而叫Shark&#xff0c;最开始的时候底层代码优化&#xff0c;sql的解析、执行引擎等等完全基于H…

基于ssm酒店客房管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本酒店客房管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…

基于CNN+数据增强+残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)+数据集+模型(五)

系列文章目录 基于CNN数据增强残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)数据集模型&#xff08;一&#xff09; 基于CNN数据增强残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)数据集模型&#xf…

seaborn库图形进行数据分析(基于tips数据集)

目录 一、相关性 二、变量分析 三、统计数 四、 特征值分布 五、多变量 Seaborn 是一个基于 matplotlib 的数据可视化库&#xff0c;可以用来绘制各种统计图表&#xff0c;包括散点图、条形图、折线图、箱线图等。Seaborn 提供了一些用于美化图表的默认样式和颜色主题&am…

macOS 安装 oh-my-zsh 后 node 报错 command not found : node

最近为了让终端中显示 git 分支的名称&#xff0c;安装了 oh-my-zsh &#xff0c;安装之后呢&#xff0c;我原先安装的 Volta、 node 都没法用了&#xff0c;报错如下&#xff1a; 这时候粗略判断应该是系统变量出了问题&#xff0c;oh-my-zsh 的变量文件是 ~/.zshrc&#xff0…

旅游景区项目信息化建设运营方案:PPT47页,附下载

关键词&#xff1a;智慧景区解决方案&#xff0c;智慧景区建设&#xff0c;智慧景区开发与管理&#xff0c;智慧景区建设的意义&#xff0c;智慧景区管理 一、旅游景区项目信息化建设背景 1、旅游业发展迅速&#xff1a;随着旅游业的不断发展&#xff0c;游客对旅游体验的需求…

简历摘要:它是什么、为什么重要以及如何编写

然而&#xff0c;在这里&#xff0c;你有绝佳的机会用自己的语言总结你最伟大的职业品质——就像用文字创作一幅自画像一样。如果做得好&#xff0c;你的简历摘要可以让你的简历引人注目&#xff0c;立即引起招聘经理的注意。但如果做得不好&#xff0c;可能会立即让人倒胃口。…

排序嘉年华———快速排序优化版和非递归思想

文章目录 一.单趟排序的优化1.“挖坑法”排序2.双指针法 二.递归次数的缩减优化三.非递归方式的快排 一.单趟排序的优化 在之前文章中介绍过&#xff0c;霍尔大佬的单趟排序&#xff0c;虽然思想很厉害&#xff0c;但存在许多坑点&#xff0c;比如While循环内条件判定的繁琐&a…

延迟消息队列的几种实现方案,哪种更适合业务,要看具体情况分析

延迟消息队列的几种实现方案&#xff0c;延迟消息怎么实现&#xff0c;很多人可能一想到的是rabbitmq的死信队列来实现&#xff0c;但是一旦引入mq的话&#xff0c;就依赖这个中间件&#xff0c;另外维护成本&#xff0c;开发成本都很大&#xff0c;那有么有简单点的实现方式呢…

基于蓝牙传输的PM2.5测量仪(论文+源码)

1. 系统设计 当前人们对家居环境的要求越来越高&#xff0c;因此本课题设计了一款基于蓝牙传输的PM2.5测量仪&#xff0c;在功能上设计如下&#xff1a; 可以实时检测当前环境的PM2.5浓度&#xff1b;检测的PM2.5浓度可以在液晶上进行显示&#xff1b;检测的参数可以通过蓝牙传…

微信小程序开发从零到壹(持续更新)

1、注册或者登录到微信小程序&#xff1b; 小程序 补充小程序的基本信息&#xff0c;如名称、图标、描述等 补充小程序的服务类目&#xff0c;设置主营类目 AppID(小程序ID)&#xff1a; wx710efeb42778d131 AppSecret(小程序密钥)&#xff1a; d12a7e2b135593f6fxxxxbe35666 2…

关于“Python”的核心知识点整理大全30

目录 12.2.3 在 OS X 系统中安装 Pygame 12.2.4 在 Windows 系统中安装 Pygame 12.3 开始游戏项目 12.3.1 创建 Pygame 窗口以及响应用户输入 首先&#xff0c;我们创建一个空的Pygame窗口。使用Pygame编写的游戏的基本结构如下&#xff1a; alien_invasion.py 12.3.2 设…

电子科大软件测试~第一次作业

第一次作业及参考答案 第一题 针对电子科技大学信息门户的“密码找回”界面的邮箱输入域进行验证&#xff0c; 采用等价划分法设计相应的测试用例&#xff0c;包括尽量多的无效等价类。 答: 有效等价类如下&#xff1a; (1)邮箱输入学符串格式***uestc.edu.cn或***UESTC.ED…

引入sortablejs插件实现表格列拖拽功能的封装

1 参考其他文章 VueElementUI 实现 动态调整表格列 显示隐藏&显示顺序 2 具体实现 2.1 将列拖拽功能封装到通用表格动态列组件里 关于表格动态列组件的具体代码&#xff0c;可以看我的另一篇博客&#xff1a;Vue - 基于Element UI封装一个表格动态列组件。 2.2 实现思…
最新文章