Vue项目中使用js+Minio实现文件的上传和下载

在Vue项目中实现文件的上传和下载功能，我们可以借助Minio这个高性能的对象存储服务。Minio提供了丰富的API接口，包括JavaScript SDK，使得我们可以在客户端或服务器端进行文件的上传、下载、删除等操作。
首先，确保你已经安装了Vue和Minio的相关依赖。你可以使用npm或yarn来安装这些依赖。
接下来，我们需要引入Minio的JavaScript SDK。你可以通过npm来安装它：

npm install minio --save

然后在你的Vue组件中引入Minio SDK：

import Minio from 'minio'

接下来，我们需要配置Minio客户端。你需要提供Minio服务的URL、端口、访问密钥和秘密密钥：

const minioClient = new Minio.Client({
endPoint: 'play.min.io',
port: 443,
useSSL: true,
accessKey: 'YOUR-ACCESSKEY',
secretKey: 'YOUR-SECRETKEY'
})

现在我们可以使用Minio客户端来进行文件的上传和下载操作了。

文件上传

文件上传的代码如下：

const file = document.getElementById('file-input').files[0] // 获取文件对象
const objectName = file.name // 设置对象名称，即文件名
const uploadData = new Minio.UploadData(objectName, file) // 创建UploadData对象，包含对象名称和文件数据
minioClient.uploadObject(uploadData, (err, data) => { // 上传文件到Minio服务，err为错误信息，data为上传成功后的信息
if (err) {
console.log(err) // 如果上传失败，打印错误信息
} else {
console.log(data) // 如果上传成功，打印成功信息
}
})

文件下载

文件下载的代码如下：

const objectName = 'your-file-name' // 设置要下载的文件名或对象名称
minioClient.downloadObject(objectName, (err, data) => { // 从Minio服务下载文件，err为错误信息，data为下载成功后的文件数据流或信息
if (err) {
console.log(err) // 如果下载失败，打印错误信息
} else {
console.log(data) // 如果下载成功，打印成功信息，data为文件数据流或信息，你可以根据需要将其保存到本地或进行其他处理
}
})

文件删除

文件删除的代码如下：

const objectName = 'your-file-name' // 设置要删除的文件名或对象名称
minioClient.removeObject(objectName, (err) => { // 从Minio服务删除文件，err为错误信息或删除结果信息
if (err) {
console.log(err) // 如果删除失败，打印错误信息或删除结果信息
} else {
console.log('File deleted successfully.') // 如果删除成功，打印成功信息或删除结果信息
}
})