Ant Design Vue 文件上传到 Minio 服务器示例代码

<p>&quot;<template>\n  <div>\n    &lt;a-upload\n      :before-upload=&quot;beforeUpload&quot;\n      :custom-request=&quot;customRequest&quot;\n    &gt;\n      <a-button>\n        &lt;a-icon type=&quot;upload&quot; /&gt; Click to Upload\n      </a-button>\n    </a-upload>\n  </div>\n</template>\n\n<script>\nimport { message } from 'ant-design-vue';\nimport Minio from 'minio';\n\nexport default {\n  methods: {\n    beforeUpload(file) {\n      // 设置文件名为随机字符串\n      file.name = this.generateRandomString() + '.' + file.name.split('.').pop();\n      return true;\n    },\n    customRequest({ file, onSuccess, onError }) {\n      // 连接到Minio服务器\n      const minioClient = new Minio.Client({\n        endPoint: 'your-minio-endpoint',\n        port: 9000,\n        useSSL: false,\n        accessKey: 'your-access-key',\n        secretKey: 'your-secret-key',\n      });\n\n      // 创建存储桶（如果不存在）\n      const bucketName = 'your-bucket-name';\n      minioClient.makeBucket(bucketName, '', (err) =&gt; {\n        if (err) {\n          onError(err);\n          return;\n        }\n\n        // 上传文件到Minio服务器\n        minioClient.putObject(bucketName, file.name, file, (err, etag) =&gt; {\n          if (err) {\n            onError(err);\n            return;\n          }\n          \n          // 文件上传成功\n          onSuccess();\n          message.success('File uploaded successfully!');\n        });\n      });\n    },\n    generateRandomString() {\n      // 生成随机字符串作为文件名\n      const length = 10;\n      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n      let result = '';\n      for (let i = 0; i &lt; length; i++) {\n        result += characters.charAt(Math.floor(Math.random() * characters.length));\n      }\n      return result;\n    },\n  },\n};\n</script>\n\n请注意将代码中的以下部分替换为您自己的Minio服务器配置：\n\n<code>javascript\nconst minioClient = new Minio.Client({\n  endPoint: 'your-minio-endpoint',\n  port: 9000,\n  useSSL: false,\n  accessKey: 'your-access-key',\n  secretKey: 'your-secret-key',\n});\n\nconst bucketName = 'your-bucket-name';\n</code>\n\n确保已安装Ant Design Vue和Minio的相关依赖，并正确引入它们。</p>