element-ui 和 koa2實現文件上傳，並且攜帶token認證。

1、koa2後臺代碼：

/**
 * 上傳api接口
 */
const Router = require("koa-router");

const router = new Router({
  prefix: "/api/v1/upload" // 路由添加前綴
});

const multer = require("koa-multer");
const path = require("path");

const { Auth } = require("../../../middlewares/auth");

const AUTH_ADMIN = 16;

// 配置
let storage = multer.diskStorage({
  // 文件保存路徑, 這裏需要自己手動到public下面新建upload文件夾。
  destination: function(req, file, cb) {
    cb(null, "public/upload");
  },
  // 修改文件名稱
  filename: function(req, file, cb) {
    let fileFormat = file.originalname.split("."); //以點分割成數組，數組的最後一項就是後綴名
    cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
// 加載配置
let upload = multer({
  storage: storage,
  limits: {
    fileSize: (1024 * 1024) / 2 // 限制512KB
  }
});

// 上傳文件
router.post("/add", new Auth(AUTH_ADMIN).m, upload.single('file'), async ctx => {
// 返回結果給前端
  ctx.response.status = 200;
  let data = {
    filename: ctx.req.file.filename
  }
  ctx.body = data
});

module.exports = router;

我這裏上傳需要傳遞token進行身份認證。如果不需要，將new Auth(AUTH_ADMIN).m,去掉。

2、前端Element-ui使用upload代碼：

<template>
  <div class="wrap">
    測試上傳
    <div>token：</div>
    <el-input type="text" v-model="token" />
    <el-upload
      class="upload-demo"
      action="http://localhost:3000/api/v1/upload/add"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      name="file"
      :headers="headers"
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">點擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上傳jpg/png文件，且不超過500kb
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      fileList: [],
    };
  },
  computed: {
    headers() {
      return {
        'Authorization': "Bearer "+ this.token
      }
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `當前限制選擇 3 個文件，本次選擇了 ${
          files.length
        } 個文件，共選擇了 ${files.length + fileList.length} 個文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`確定移除 ${file.name}？`);
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
}
</style>

我這裏使用了Bearer token的認證方式。這個和koa2服務端token驗證機制有關。
token相關設置，在heaers內設置。

name="file" 這個file名稱是和後臺約定的。

注意：element-ui的上傳組件upload，它是一個文件調用一次請求接口的。

附上koa上傳七牛雲的文章

https://www.jianshu.com/p/7520e0bee777