当前位置: 首页 > news >正文

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() {//从后台获取stsTokenif (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 = truethis.loadProgress = 35this.isUploading = false;const upload = (e) => {uploadFile(e.file, e.file.name, this.$ossClient,this.$minioInfo).then((res) => {this.loadProgress = 100this.progressFlag = falsethis.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 = 0this.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;//ArrayBufferlet 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 = fileNamelet urls=minioInfo.endPoint.indexOf("//")>0?minioInfo.endPoint:('http://'+minioInfo.endPoint)obj.url =  `${urls}:${minioInfo.port}/${minioInfo.bucket}/${storeAs}`;resolve(obj)}});}})} catch (e) {}
}
http://www.lryc.cn/news/263638.html

相关文章:

  • MySQL表的增删改查(初阶)
  • 搜维尔科技:关于“第九届元宇宙数字人设计大赛”线上+线下巡回宣讲本周高校行程通告!
  • Gemini 1.0:Google推出的全新AI模型,改变生成式人工智能领域的游戏规则!
  • excel打开并操作CAD(excel-vba实现)_另附:CAD打开excel
  • Prolist组件实现动态竖排展示
  • 基于JAVA的海南旅游景点推荐系统 开源项目
  • 【Apache-StreamPark】Flink 开发利器 StreamPark 的介绍、安装、使用
  • 【STM32】STM32学习笔记-LED闪烁 LED流水灯 蜂鸣器(06-2)
  • docker服务启动报错docker.service holdoff time over, scheduling restart.
  • cfa一级考生复习经验分享系列(八)
  • React中的事件处理
  • 德人合科技 | 公司电脑文件加密系统
  • FinalShell的下载、安装及基本使用
  • 华为实训课笔记 2023
  • 图灵日记之Leetcode链表中间结点牛客链表中倒数第k个结点Leetcode合并两个有序链表leetcode反转链表
  • 条款5:了解c++默默编写并调用了哪些函数
  • Apache RocketMQ 5.0 腾讯云落地实践
  • FIFO的Verilog设计(三)——最小深度计算
  • JavaWeb笔记之JavaWeb JDBC
  • pytorch网络的增删改
  • Tomcat (Linux系统)详解全集
  • [德人合科技]——设计公司 \ 设计院图纸文件数据 | 资料透明加密防泄密软件
  • 数字化转型中的6S管理
  • Linux学习(1)——初识Linux
  • 2.5 - 网络协议 - HTTP协议工作原理,报文格式,抓包实战
  • 新增工具箱管理功能、重构网站证书管理功能,1Panel开源面板v1.9.0发布
  • 棋牌的电脑计时计费管理系统教程,棋牌灯控管理软件操作教程
  • 《Kotlin核心编程》笔记:设计模式
  • hive企业级调优策略之数据倾斜
  • MATLAB版本、labview版本、UHD版本 互相对应