vue上传文件到Minio

这篇博客介绍了如何在Vue.js应用中使用ElementUI组件封装一个文件上传功能,将文件上传到Minio对象存储服务。文章分为两部分,首先展示了用于文件上传的JavaScript代码实现,接着展示了页面部分的Vue组件设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

封装js

文件 file-uploader.js


var Minio = require('minio');
let s3 = new Minio.Client({
    endPoint: '192.168.xxx.xxx',
    port: 9000,
    useSSL: false,
    accessKey: 'xxxx',
    secretKey: 'xxxx',
    Region:'xxxxxx',

});
//base64转bolb
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(',');
     //注意base64的最后面中括号和引号是不转译的   
     var _arr = arr[1].substring(0,arr[1].length-2);
     var mime = arr[0].match(/:(.*?);/)[1],
         bstr =atob(_arr),
         n = bstr.length,
         u8arr = new Uint8Array(n);
     while (n--) {
         u8arr[n] = bstr.charCodeAt(n);
     }
     return new Blob([u8arr], {
         type: mime
     });
 };

export function uploadFile(file){
    var metaData = {
        'Content-Type': file.type,
        "content-length":file.size
    }
    let reader = new FileReader();
    reader.readAsDataURL(file);
  	reader.onload = function(e){
            const dataUrl = e.target.result;
            const bas
### 实现 Vue.js 前端图片上传MinIO 对象存储 #### 配置 MinIO 客户端 SDK 为了使 Vue 应用能够与 MinIO 进行交互,需先安装 `minio-js` SDK。 ```bash npm install minio --save ``` 此命令会将 MinIOJavaScript SDK 添加到项目依赖中[^1]。 #### 初始化 MinIO Client 在项目的合适位置创建一个新的 JS 文件用于初始化 MinIO client: ```javascript // src/utils/minioClient.js import { Client } from 'minio'; const minioClient = new Client({ endPoint: 'play.min.io', // 替换成实际的服务地址 port: 9000, // 如果有指定端口则填写,默认可不填 useSSL: true, accessKey: 'YOUR-ACCESSKEYID', secretKey: 'YOUR-SECRETACCESSKEY' }); export default minioClient; ``` 上述代码片段展示了如何通过访问密钥和私钥来连接远程 MinIO 服务实例[^2]。 #### 构建文件上传组件 接下来,在 Vue 组件内构建表单以允许用户选择并提交图像文件MinIO 存储桶。 ```html <!-- components/ImageUploader.vue --> <template> <div class="upload-section"> <input type="file" @change="handleFileChange"/> <button @click="uploadImage">Upload</button> </div> </template> <script> import minioClient from '../utils/minioClient'; export default { name: "ImageUploader", data() { return { selectedFile: null } }, methods: { handleFileChange(event){ this.selectedFile = event.target.files[0]; }, async uploadImage(){ try{ const bucketName = 'your-bucket-name'; // 设置目标bucket名称 await minioClient.putObject(bucketName, this.selectedFile.name, this.selectedFile); console.log('File uploaded successfully'); }catch(error){ console.error('Error during file upload:', error.message); } } } } </script> ``` 这段代码实现了基本的文件选取以及调用 MinIO API 将选定文件发送到特定 Bucket 中的功能[^3]。 #### 后端支持 (Spring Boot) 对于后端部分,如果采用 Spring Boot,则可以参照提供的链接中的示例工程设置相应的控制器和服务层逻辑处理来自前端的应用程序请求,并转发这些请求到 MinIO Server 上完成最终的数据保存操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值