前端利用formData对象上传文件，以链接形式返回

前言

环境搭建

后端我们还是使用我们熟悉的node.JS加koa来搭建我们的环境

• 安装依赖

npm install koa --save
npm install koa-router --save
npm install koa-static --save
npm install koa-body  --save
npm i @koa/cors --save
npm i formidable --save

• 搭建

  创建public文件夹

var Koa = require("koa");
var app = new Koa();
var Router = require("koa-router")();
const koaBody = require("koa-body");
const formidable = require("formidable");
const path = require("path");
app.use(
  koaBody({
    // maxFieldsSize: 10 * 1024 * 1024, //10MB  文件上传大小限制
    multipart: true, //多文件上传
    formidable: {
      // 上传目录
      uploadDir: path.join(__dirname, "/public"),
      // 保留文件扩展名
      keepExtensions: true,
    },
  })
);
const koaStatic = require("koa-static");
app.use(koaStatic(path.join(__dirname, "public")));
// 跨域
const cors = require("@koa/cors");
app.use(cors());

Router.get("/", async (ctx) => {
  ctx.body = "OK";
});

app
  .use(Router.routes()) //启动路由
  .use(Router.allowedMethods());
app.listen(3000);

环境没有问题

前端实现

需要安装一下axios

npm install axios --save

• 前端代码

<template>
  <input type="file" @change="onChange" ref="img" multiple />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
let img = ref();
const onChange = () => {
  let formdata = new FormData();
  for (let item of img.value.files) {
    formdata.append("file", item);
  }
  axios({
    method: "post",
    url: "http://127.0.0.1:3000/updata",
    data: formdata,
    //监听进度
    onUploadProgress: (ProgressEvent) => {
      console.log((ProgressEvent.loaded / ProgressEvent.total) * 100);
    },
  }).then((response) => {
    console.log(response.data);
  });
};
</script>

后端实现

添加路由

Router.post("/updata", async (ctx) => {
  let basenameList = [];
  const fileList = ctx.request.files["file"];
  //Array.isArray(fileList) ? fileList : Array(fileList)
  //为了单文件上传和多文件上传都可以读取到正确的路径
  for (let file of Array.isArray(fileList) ? fileList : Array(fileList)) {
    basenameList.push(file.newFilename);
  }
  let urlList = [];
  for (let k in basenameList) {
    urlList.push(`${ctx.origin}/${basenameList[k]}`);
  }
  ctx.body = urlList;
});

测试

• 单文件上传

• 多文件上传

文件已上传到了服务器

也可以通过链接访问