Skip to content

sinoui/http-send-file

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@sinoui/http-send-file

npm version downloads

@sinoui/http-send-file 旨在提供一种便捷的方式用于文件上传。

安装

执行下面的命令即可快速安装:

  • 使用 npm

    npm install --save @sinoui/http-send-file
  • 使用 yarn

    yarn add @sinoui/http-send-file

快速使用

html文件

<html>
  <body>
    <input id="file" type="file" />
    <input type="button" value="文件上传" onclick="uploadFile()" />
  </body>
</html>

js文件

import sendFile from '@sinoui/http-send-file';

async function uploadFile() {
  const file = document.getElementById('file').files[0];
  try {
    await sendFile('http://localhost:3000/files', file);
    console.log('上传成功');
  } catch (error) {
    console.error('上传失败');
  }
}

上传一组文件

一组文件对象添加到 FormData 时组织key的方式:indices | repeat。

Java 后端可以解析repeat格式的,NodePythonRuby后端可以解析indices格式的。

import sendFile from '@sinoui/http-send-file';

async function uploadFileDemo() {
  await sendFile(url, files, {
    arrayFormat: 'indices',
  });
}

添加额外数据

import sendFile from '@sinoui/http-send-file';

async function uploadFileDemo() {
  await sendFile(url, files, 'usePhotot', {
    data: {
      userId: '123',
      userName: 'zhangsan',
    },
  });
}

文件上传进度

import sendFile from '@sinoui/http-send-file';

const onUploadProgress = (progressEvent: ProgressEvent) => {
  console.log(
    `上传进度:${((progressEvent.loaded / progressEvent.total) * 100) | 0}%`,
  );
};

async function uploadFileDemo() {
  await sendFile(url, files, {
    onUploadProgress,
  });
}

sendFile()方法参数说明

  • url (string)

    指定文件上传的 url

  • files (Blob[] | Blob)

    需要上传的文件,可以是单个的或者是数组

  • fileFieldName (string)

    指定表单域的名称,默认为file

  • options (object)

    请求配置,支持所有的Axios 请求配置,除此之外,还包括arrayFormat。其中:

    • arrayFormat

      一组文件对象添加到 FormData 时组织key的方式。默认为repeat

      • repeat: file=file1&file=file2&file=file3

      • indices: file[0]=file1&file[1]=file2&file[2]=file3

    • data

      指定需要的额外数据。必须是可以加入到FormData中的对象,如:

      const extraFormData = {
        userId: '123',
        userName: '张三',
      };

      对象中的属性值只支持原始类型。

    • onUploadProgress

      文件上传进度回调函数

注意: 如果需要稳定上传大文件,推荐使用send-big-file