node文件上传

[daisybaicai]

node后台，需要安装multiparty, fs

const http = require('http');
// eslint-disable-next-line import/no-extraneous-dependencies
const multiparty = require('multiparty');
const util = require('util');
const fs = require('fs');
const paths = require('path');

const server = http.createServer();
const UPLOAD_DIR = paths.resolve(__dirname, '..', 'target'); // 目录

server.on('request', async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*');
  if (req.url === '/upload') {
    // demo
    const form = new multiparty.Form();

    form.parse(req, (err, fields, files) => {
      console.log(files);
      const { originalFilename } = files.file[0];
      const { path } = files.file[0];
      const dstPath = `${UPLOAD_DIR}/${originalFilename}`;
      fs.rename(path, dstPath, (er) => {
        if (er) {
          console.log('rename error: ', er);
        } else {
          console.log('rename ok');
        }
      });
      res.writeHead(200, { 'content-type': 'text/plain' });
      res.write('received upload:\n\n');
      res.end(util.inspect({ fields, files }));
    });
  }
});

server.listen(3000, () => console.log('正在监听3000'));

vue页面

<template>
  <div>
    <form>
      <input type="file" @change="handleFileChange" />
      <el-button @click="handleUpload">上传</el-button>
    </form>
  </div>
</template>

<script>
import request from '../utils/utils';

export default {
  data() {
    return {
      container: {
        file: null,
      },
    };
  },
  methods: {
    async handleFileChange(e) {
      const [file] = e.target.files;
      if (!file) return;
      // 清空之前的数据，初始化
      Object.assign(this.$data, this.$options.data());
      this.container.file = file;
    },
    handleUpload(event) {
      event.preventDefault(); // 取消默认行为
      // 创建 formData 对象
      const formData = new FormData();
      // 向 formData 对象中添加文件
      formData.append('file', this.container.file);
      request({
        url: 'http://localhost:3000/upload',
        data: formData,
      });
    },
  },
};
</script>

request.js请求封装

const request = ({
 methods = 'post', url, data, headers = {} 
}) => {
  // eslint-disable-next-line no-new
  new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open(methods, url);
    Object.keys(headers).forEach((key) => {
      xhr.setRequestHeader(key);
    });
    xhr.send(data);
    xhr.onload = (e) => {
      resolve({
        data: e.target.response,
      });
    }
  });
};

export default request;

目录结构

├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── server
│   └── index.js
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── utils
│   │   └── utils.js
│   └── views
│       ├── About.vue
│       └── Home.vue
├── target
│   └── mytest.doc
└── yarn.lock