Pure front-end use Vue3 to upload files to the minio file server (paste can be used directly)

1. First install the minio plug-in. Because I use vue3, it does not support modular import, so we use a vue2 package written by someone else.

npm install --save minio-js

2. Import this package on the page where the file needs to be uploaded

import { Minio } from "minio-js";

3. Create a minio client

 minioClient = new ({
      endPoint: '192.168.1.111', // Minio's ip, just replace your own      port: 9000, // If the address is similar, there is no need to write the port number      useSSL: false, // Whether to use ssl      accessKey: accessKey, // Login accessKey      secretKey: secretKey,
      sessionToken: token,
    });

Let me explain here that accessKey, secretKey, and sessionToken are all temporary credentials obtained through the interface.

4. By uploading a pre-signed URL, we first need to obtain this URL. The minioAPI provides it and can obtain a signed URL.

function uploadByUrl(url, data) {
   = true;
  return fetch(url, {
    mode: "cors", // Solve cross-domain    headers: {
      Accept: "application/json,text/plain,/",
    },
    method: "PUT",
    body: data,//data is the file object  }).then((response) =&gt; {
    if () {
      // Handle successful situations       = false;
      proxy.$("Uploaded successfully");
    } else {
      // Handling failed situations      proxy.$refs["my-upload"].clearFiles();
      throw new Error("Upload failed, please upload again!");
    }
  });
}

//Get the uploaded URL(
    bucketName,//Bucket name    fileName,//File name    1000 * 60 * 5,//The URL validity period    function (err, presignedUrl) {//Incorrect callback method      if (err) return (err);
      let url = presignedUrl;
      uploadByUrl(url, );
    }
  );

Summarize

This is the article about uploading files to the minio file server using Vue3 in pure front-end. For more related contents of uploading files to the minio file server of Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!