vue3 + vite + setup语法糖使用minIO上传文件

本文主要是介绍vue3 + vite + setup语法糖使用minIO上传文件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：需要使用minio-js插件，原生minio使用vue2框架

npm i minio-js

源码：

minio的部署可参考Windows部署MinIO，搭建本地对象存储服务_minio windows部署-CSDN博客

注意初始化与作为参数中的 bucketName 需要一致，部署本地minio后需要创建bucket

<script setup>
import { ElMessage } from 'element-plus';
import { initMinio, putObject } from 'minio-js'function handleFiles(event) {try {var f = event.target.files[0];let reader = new FileReader();reader.readAsArrayBuffer(f);reader.onload = function (e) {let res = e.target.result; //ArrayBuffer//初始化initMinio({// endPoint: '192.168.x.xxx',endPoint: '127.0.0.1',// minio端点port: 9000,useSSL: false,accessKey: '',secretKey: '',bucketName: '',});//上传,callback是回调函数putObject('your bucketName', res, f.name, callback);};} catch (error) {ElMessage({showClose: true,message: '错误:' + error,type: 'error',duration: 0,});}
}function callback(err, data) {if (err) {ElMessage({showClose: true,message: '上传失败,错误:' + err.message,type: 'error',duration: 0,});} else {ElMessage({showClose: true,message: '上传成功',type: 'success',});}
}
</script>
<template>
<div><input ref="input" type="file" @change="handleFiles" />
</div>
</template>
<style scoped></style>

这篇关于vue3 + vite + setup语法糖使用minIO上传文件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---