js 多文件上傳到koa, koa 上傳到阿里雲 oss 服務

瀏覽器端js 代碼

代碼有點多，就先只上傳核心代碼，有需求其餘部分代碼能夠留言，我再上傳下

// input 標籤 監聽change 事件
let filesCache = []
let fileNames = []
$uploaderInput.on("change", function (e) {
  let src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
  for (let i = 0, len = files.length; i < len; ++i) {
    // 以文件名爲關鍵詞，簡單文件去重
    if (!fileNames.includes(files[i]['name'])) {
      fileNames.push(files[i]['name'])
      let file = files[i];
      if (url) {
        src = url.createObjectURL(file);
      } else {
        src = e.target.result;
      }
      $uploaderFiles.append($(tmpl.replace('#url#', src)));
      filesCache.push(files[i])
      console.log(filesCache)
    }
  }
});

// 提交文件
$('#putfile').on("click", function () {
  let formData = new FormData();
  //追加文件數據    
  for (i = 0; i < filesCache.length; i++) {
    formData.append("file[" + i + "]", filesCache[i]);
  }
  console.log(formData)
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://localhost:9527/file/uploader');
  xhr.onload = function () {
    console.log(xhr);
  }
  xhr.send(formData);
})

此次提交了兩個文件，filesCache 打印數據格式以下，瀏覽器本身封裝好多File 對象

koa node 服務器端代碼

const Router = require('koa-router')
let router = new Router()
const fs = require('fs')
let OSS = require('ali-oss');
let path = require('path')

let client = new OSS({
  region: 'oss-cn-shenzhen',
  //雲帳號AccessKey有全部API訪問權限，建議遵循阿里雲安全最佳實踐，部署在服務端使用RAM子帳號或STS，部署在客戶端使用STS。
  accessKeyId: '****',
  accessKeySecret: '****',
  bucket: '***'
});
// 上傳文件
router.post('/uploader', async (ctx) => {
  const files = ctx.request.files; // 獲取上傳文件
  for(let key in files) {
    let file = files[key]
    // 建立可讀流
    const stream = fs.createReadStream(file.path);
   // yuny 爲文件，意思是將文件存放到yuny 文件夾下
    let result = await client.putStream('/yuny/'+file.name, stream);
    console.log(result);
  }
  let html = `
    <ul>
      上傳成功
    </ul>
  `
  ctx.body = html
})

查看oss 控制檯，能夠看到兩個文件已經成功上傳了