温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

TypeScript前端上传文件到MinIO怎么实现

发布时间:2022-10-22 14:31:35 来源:亿速云 阅读:289 作者:iii 栏目:web开发

这篇文章主要讲解了“TypeScript前端上传文件到MinIO怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript前端上传文件到MinIO怎么实现”吧!

    什么是MinIO?

    MinIO 是一款高性能、分布式的对象存储系统. 它是一款软件产品, 可以100%的运行在标准硬件。即X86等低成本机器也能够很好的运行MinIO。

    本地Docker部署测试服务器

    docker pull bitnami/minio:latest
    # MINIO_ROOT_USER最少3个字符
    # MINIO_ROOT_PASSWORD最少8个字符
    # 第一次运行的时候,服务会自动关闭,手动再次启动就可以正常运行了.
    docker run -itd \
        --name minio-server \
        -p 9000:9000 \
        -p 9001:9001 \
        --env MINIO_ROOT_USER="root" \
        --env MINIO_ROOT_PASSWORD="123456789" \
        --env MINIO_DEFAULT_BUCKETS='images' \
        --env MINIO_FORCE_NEW_KEYS="yes" \
        --env BITNAMI_DEBUG=true \
        bitnami/minio:latest

    上传的API

    它有3个API可供调用:

    • putObject 从流上传

    • fPutObject 从文件上传

    • presignedPutObject 提供一个临时的上传链接以供上传

    使用1和2的方式的话,在前端需要暴露出连接MinIO的访问密钥,很不安全,而且官方的Js客户端压根就没想过开放给浏览器.
    而3的话,可以由服务端生成一个临时的上传链接提供给前端上传之用,而无需要暴露访问MinIO的密钥,非常的安全,我采用的是第三种方式.

    TypeScript实现

    在TypeScript下,我们可用的有三种方式实现文件上传:

    • XMLHttpRequest

    • Fetch API

    • Axios

    需要注意的是: 事实上,后两种API都是封装的XMLHttpRequest.

    1. XMLHttpRequest

    function xhrUploadFile(file: File, url: string) {
      const xhr = new XMLHttpRequest();
      xhr.open('PUT', url, true);
      xhr.send(file);
      xhr.onload = () => {
        if (xhr.status === 200) {
          console.log(`${file.name} 上传成功`);
        } else {
          console.error(`${file.name} 上传失败`);
        }
      };
    }

    2. Fetch API

    function fetchUploadFile(file: File, url: string) {
      fetch(url, {
        method: 'PUT',
        body: file,
      })
        .then((response) => {
          console.log(`${file.name} 上传成功`, response);
        })
        .catch((error) => {
          console.error(`${file.name} 上传失败`, error);
        });
    }

    3. Axios

    function axiosUploadFile(file: File, url: string) {
      const instance = axios.create();
      instance
        .put(url, file, {
          headers: {
            'Content-Type': file.type,
          },
        })
        .then(function (response) {
          console.log(`${file.name} 上传成功`, response);
        })
        .catch(function (error) {
          console.error(`${file.name} 上传失败`, error);
        });
    }

    从后端获取临时上传链接

    function retrieveNewURL(file: File, cb: (file: File, url: string) => void) {
      const url = `http://localhost:8080/presignedUrl/${file.name}`;
      axios.get(url)
        .then(function (response) {
          cb(file, response.data.data.url);
        })
        .catch(function (error) {
          console.error(error);
        });
    }

    上传文件

    function onXhrUploadFile(file?: File) {
      console.log('onXhrUploadFile', file);
      if (file) {
        retrieveNewURL(file, (file, url) => {
          xhrUploadFile(file, url);
        });
      }
    }

    踩过的坑

    1. presignedPutObject方式上传提交的方法必须得是PUT

    我试过了用POST去上传文件,但是显然的是:我失败了.必须得用PUT去上传.

    2. 直接发送File即可

    看了不少文章都是这么干的: 构造一个FormData,然后把文件打进去,如果用putObjectfPutObject这两种方式上传,这是没问题的,但是使用presignedPutObject则是不行的,直接发送File就可以了.

    fileUpload(file) {
        const url = 'http://example.com/file-upload';
        const formData = new FormData();
        formData.append('file', file)
        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        }
        return  post(url, formData,config)
    }

    如果使用以上的方式上传,文件头会被插入一段数据,看起来像是这样子的:

    ------WebKitFormBoundaryaym16ehT29q60rUx
    Content-Disposition: form-data; 
    name="file"; 
    filename="webfonts.zip"
    Content-Type: application/zip

    它是遵照了 rfc1867 定义的协议.

    3. 使用Axios上传的时候,需要自己把Content-Type填写成为file.type

    直接使用XMLHttpRequestFetch API都会自动填写成为文件真实的Content-Type.而Axios则不会,需要自己填写进去,或许是我不会使用Axios,但是这是一个需要注意的地方,否则在MinIO里边的Content-Type会被填写成为Axios默认的Content-Type,或者是你自己指定的.

    感谢各位的阅读,以上就是“TypeScript前端上传文件到MinIO怎么实现”的内容了,经过本文的学习后,相信大家对TypeScript前端上传文件到MinIO怎么实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI