下面是一个使用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>

请根据实际情况替换minioServerUrlminioAccessKeyminioSecretKey变量的值,并将minioServerUrl中的bucket-name替换为你的Minio存储桶名称

请用js写一段文件上传代码用ant design vueoss服务器用minio

原文地址: https://www.cveoy.top/t/topic/h38D 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录