nodejs转发前端文件到后端

最新推荐文章于 2023-08-13 17:17:49 发布

weixin_41721295

最新推荐文章于 2023-08-13 17:17:49 发布

阅读量964

点赞数

分类专栏： node 文章标签： js node.js vue.js

本文链接：https://blog.csdn.net/weixin_41721295/article/details/121541849

版权

node 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【前端上传文件】

示例：vue+elementUI的上传组件

<el-upload
  :auto-upload="false"
  :on-change="uploadFile"
  name="file">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>

import axios from 'axios';
const url = 'fileUpload';
async uploadFile(file) {
  const formData = new FormData()
  formData.append('file', file.raw)
  const res = await fileUpload(formData)
  console.log(res)
}

function fileUpload(params = {}) {
  const otherOptions = {
    headers: { 'Content-Type': 'multipart/form-data' }
  }
  return axios.post(url, params, otherOptions)
}

【node端转发】

示例：node + egg

在config.default.js中配置multipart

config.multipart = {
  mode: 'file',
  fileExtensions: ['.xlsx', '.xls', '.pdf', '.doc', '.docx']
};

  import axios from 'axios';
  const { ctx, config: uploadUrl} = this;
  const files = ctx.request.files; // files[0]表示获取第一个文件
  const file = files[0];
  const formData = new FormData();
  if (file) {
    // 读取文件
    // const fileStream = fs.readFileSync(file.filepath) 
    const fileStream = fs.createReadStream(file.filepath);
    const name = file.filename;
    formData.append(file.field, fileStream, {
      filename: name,
      header: `--${formData.getBoundary()}\r\nContent-Disposition: form-data; name="${file.field}"; filename=${name}\r\nContent-Type: octet-stream\r\n\r\n`,
    });
  }
   
  axios.post(uploadUrl, formData, {
    headers: {
      'content-type': 'multipart/form-data; boundary=' + formData.getBoundary()
    }
  }).then(res => {
    console.log(res)
  })

【测试用例】

mocha + suppertest

import mock from 'egg-mock';
import assert = require('assert');
describe('模块名称', () => {
  let app;
  before(() => {
    app = mock.app({
      baseDir: 'xxxx',
    });
    return app.ready();
  });

  after(() => app.close());
  afterEach(mock.restore);
  
  describe('test file Upload', () => {
    it('should GET file Upload result', async () => {
      /* 测试上传文件 */
        const filename = 'xxx.pdf';
        return await app.httpRequest()
          .post(`${routerPrefix}/vMail/uploadAttachment`)
          .field('name', 'file')
          .attach('file', 'test/'+ filename)
          .expect('Content-Type', /json/)
           expect(200);
    });
  });

});

参考文档：

Egg 单元测试_w3cschool为什么要单元测试先问我们自己以下几个问题：你的代码质量如何度量？你是如何保证代码质量？你敢随时重构代码吗？你是如何确保重构的代码依然保持正确性？你是否有足够信心在没有测试的情况下随时发布你的代码？如果答案都比较犹豫，那么就证明我们非常需要单元测试。它能带给我们很多保障：代码质量持续有保障重构正确性保_来自企业级 Node.js 框架 egg，w3cschool编程狮。https://www.w3cschool.cn/eggjslesson/eggjslesson-vkm535yp.html GitHub - visionmedia/supertest: 🕷 Super-agent driven library for testing node.js HTTP servers using a fluent API.https://github.com/visionmedia/supertest#getting-started