请用js写一段文件上传代码用ant design vueoss服务器用minio
下面是一个使用Ant Design Vue和Minio服务器的文件上传示例代码:
<template>
<div>
<a-upload
:before-upload="beforeUpload"
:custom-request="customRequest"
:show-upload-list="false"
>
<a-button>
选择文件
</a-button>
</a-upload>
</div>
</template>
<script>
import { Upload, Button, message } from "ant-design-vue";
import { minioServerUrl, minioAccessKey, minioSecretKey } from "@/config"; // 假设配置文件中定义了Minio服务器的URL、Access Key和Secret Key
export default {
components: {
"a-upload": Upload,
"a-button": Button
},
methods: {
beforeUpload(file) {
// 可以在此处进行文件类型、大小等的校验
return true;
},
customRequest({ file, onSuccess, onError }) {
const reader = new FileReader();
reader.onload = () => {
const buffer = new Uint8Array(reader.result);
const blob = new Blob([buffer]);
const formData = new FormData();
formData.append("file", blob, file.name);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
onSuccess();
message.success("文件上传成功");
} else {
onError();
message.error("文件上传失败");
}
}
};
xhr.open("POST", `${minioServerUrl}/minio/bucket-name/${file.name}`); // 替换为你的Minio存储桶名称
xhr.setRequestHeader("Authorization", `Bearer ${minioAccessKey}:${minioSecretKey}`);
xhr.send(formData);
};
reader.readAsArrayBuffer(file);
}
}
};
</script>
请根据实际情况替换minioServerUrl、minioAccessKey和minioSecretKey变量的值,并将minioServerUrl中的bucket-name替换为你的Minio存储桶名称
原文地址: https://www.cveoy.top/t/topic/h38D 著作权归作者所有。请勿转载和采集!