koa + 前端文件传输

1. 安装并引入koa-body

npm i koa-body -s

const koaBody = require('koa-body');

app.use(koaBody({
    multipart: true  // 支持文件格式
})).listen(3000)

2. 上传文件接口

const fs = require('fs');
const path = require('path');

router.post('/uploadfile', async (ctx) => {
    const { file } = ctx.request.files;
    
    // 读取文件的二进制数据
    const fileData = fs.readFileSync(file.path);
    
    // 对上传的文件进行一些操作
    const filePath = path.join(__dirname, `public/upload/${file.name}`);
    const writer = fs.createWriteStream(filePath);
    writer.write(fileData);
    
    ctx.body = "文件上传成功";
})

3. 获取文件接口

方法一：直接返回buffer类型的二进制数据

router.get('/getfile', async (ctx) => {
    const { filename } = ctx.query;
    
    // 获取服务器上的文件
    const filePath = path.join(__dirname, `public/upload/${filename}`);
    const reader = fs.readFileSync(filePath);

    ctx.body = reader;
})

前端代码

function createImg(url) {
  // 将图片显示到页面上
  var img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}

const url = 'http://localhost:3000/getfile';

// 采用 blob 方式
axios.get(url, { responseType: 'blob' }).then((resp) => {
  const imgUrl = window.URL.createObjectURL(resp.data);
  console.log('imgUrl', imgUrl);
  createImg(imgUrl);
});

// 采用 arraybuffer 方式
axios.get(url, { responseType: 'arraybuffer' }).then((resp) => {
  var imgUrl = window.URL.createObjectURL(new Blob([resp.data]));
  console.log('imgUrl', imgUrl);
  createImg(imgUrl);
});

// 转换成base64格式
axios.get(url, { responseType: 'arraybuffer' }).then((resp) => {
  const imgUrl =
    'data:image/png;base64,' +
    btoa(new Uint8Array(resp.data).reduce(
        (data, byte) => data + String.fromCharCode(byte), ''
    ));
    
    createImg(imgUrl);
});

方法二：koa直接将buffer转换成base64格式

推荐：前端的处理会比较简单

koa层

const fs = require('fs');
const path = require('path');
router.get('/getfile', async (ctx) => {
    const { filename } = ctx.query;
    
    // 获取服务器上的文件
    const filePath = path.join(__dirname, `public/upload/${filename}`) + ;
    const reader = fs.readFileSync(filePath);

    ctx.body = fileData.toString('base64');
})

前端代码

axios.get(url).then((resp) => {
	const imgUrl = `data:image/png;base64,${resp.data}`
    createImg(imgUrl);
});

4. 验证

使用postman调用文件上传接口，上传之后会发现koa项目中会自动生成public/upload/路径，下面有传入的lufi.jpg文件；

前端展示情况：

如下图所示，分别是使用base64和blob链接展示图片