@sinoui/http-send-file

@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格式的，Node、Python、Ruby后端可以解析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。

http-send-file

使用axios处理文件上传