node.js 前端直接分片上传文件与阿里云OSS的方法

解决问题：直接由用户上传文件至阿里云OSS，而非经过中间件/后端

官方文档：分片上传 (aliyun.com)​​​​​​​​​​​

在官方文档中，提供的方法是由中间件上传至oss，调用了path库，但是在浏览器用户没有那么大的权限，我们关注到文档中此表：

类型	参数	说明
必选参数	name {String}	Object完整路径，Object完整路径中不能包含Bucket名称。
	file {String|File}	表示文件路径或者HTML5文件。

在必选参数中除了提供path，还可以提供HTML5文件，也就是我们常说的file。

给出如下解决：

const OSS = require('ali-oss');
const path = require("path");

let elm = document.getElementById('fileInput')
uploadFile = null

elm.onchange = function (e) {
    let files = e.target.files
    let uploadFile = files[0]
    let render = new FileReader()

const client = new OSS({
  // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourRegion',
  // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // 填写Bucket名称，例如examplebucket。
  bucket: 'examplebucket',
});


const progress = (p, _checkpoint) => {
  // Object的上传进度。
  console.log(p); 
  // 分片上传的断点信息。
  console.log(_checkpoint); 
};

const headers = {  
  // 指定Object的存储类型。
  'x-oss-storage-class': 'Standard', 
  // 指定Object标签，可同时设置多个标签。
  'x-oss-tagging': 'Tag1=1&Tag2=2', 
  // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
  'x-oss-forbid-overwrite': 'true'
}

async function multipartUpload() {
  try {
    const result = await client.multipartUpload('exampledir/exampleobject.txt', uploadFile, {
      progress,
      meta: {
        year: 2020,
        people: 'test',
      },
    });
    console.log(result);
    const head = await client.head('exampledir/exampleobject.txt');
    console.log(head);
  } catch (e) {
    if (e.code === 'ConnectionTimeoutError') {
      console.log('TimeoutError');
      // do ConnectionTimeoutError operation
    }
    console.log(e);
  }
}

multipartUpload();

之后调用multipartUpload()即可。