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

这篇具有很好参考价值的文章主要介绍了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()即可。文章来源地址https://www.toymoban.com/news/detail-512108.html

到了这里，关于node.js 前端直接分片上传文件与阿里云OSS的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！