浏览器端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 对象

image.png

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 控制台，可以看到两个文件已经成功上传了

image.png