解決問題：直接由用戶上傳文件至阿里云OSS，而非經(jīng)過中間件/后端

官方文檔：分片上傳 (aliyun.com)???????????

在官方文檔中，提供的方法是由中間件上傳至oss，調(diào)用了path庫，但是在瀏覽器用戶沒有那么大的權(quán)限，我們關(guān)注到文檔中此表：

在必選參數(shù)中除了提供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填寫B(tài)ucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
  region: 'yourRegion',
  // 阿里云賬號AccessKey擁有所有API的訪問權(quán)限，風(fēng)險很高。強烈建議您創(chuàng)建并使用RAM用戶進行API訪問或日常運維，請登錄RAM控制臺創(chuàng)建RAM用戶。
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // 填寫B(tài)ucket名稱，例如examplebucket。
  bucket: 'examplebucket',
});


const progress = (p, _checkpoint) => {
  // Object的上傳進度。
  console.log(p); 
  // 分片上傳的斷點信息。
  console.log(_checkpoint); 
};

const headers = {  
  // 指定Object的存儲類型。
  'x-oss-storage-class': 'Standard', 
  // 指定Object標(biāo)簽，可同時設(shè)置多個標(biāo)簽。
  'x-oss-tagging': 'Tag1=1&Tag2=2', 
  // 指定初始化分片上傳時是否覆蓋同名Object。此處設(shè)置為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();

之后調(diào)用multipartUpload()即可。文章來源地址http://www.zghlxwxcb.cn/news/detail-512108.html

到了這里，關(guān)于node.js 前端直接分片上傳文件與阿里云OSS的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！