Node---上传文件

时间 2019-11-21

标签 node 上传文件繁體版

原文原文链接

这两天撸node都是在 express 框架，下面内容都基于这个框架。javascript

服务器上传文件

服务器上传文件随便上网一搜一大把，可是这里也要简单记录一下个人练习。html

上传文件须要引入 multer 这个中间键来处理表单数据，由于上传文件是已input标签type='file'来上传的，因此是一种表单数据。前端

app.jsjava

const express = require('express');
const multer = require('multer');
const app = express();

var Storage = multer.diskStorage({
  destination(req, file, callback) {
    // 上传文件的目录
    callback(null, './file');
  },
  filename(req, file, callback) {
    // 自定义文件名称
    callback(null, file.fieldname + '_' + Date.now() + '_' + file.originalname);
  }
})

// any 能够上传任意文件
var upload = multer({
  storage: Storage
}).any();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
})

// 上传文件
app.post('/api/Upload', (req, res) => {
  res.writeHead(200,
    {
      'Content-Type':'text/html',
      'Access-Control-Allow-Origin': '*', // 容许跨域访问
      'Access-Control-Allow-Headers': '*', // 容许访问
    }
  );
  
  upload(req, res, function (err) {
    if (err) {
      return res.end("Something went wrong!");
    }
    return res.end("File uploaded sucessfully!.");
  });
})



let sever = app.listen(8080, '127.0.0.1', () => {
  var host = sever.address().address;
  var port = sever.address().port;

  console.log('http://%s%s', host , port);
})

复制代码

index.htmlnode

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Upload - Node JS</title>
</head>
<body>
  <form id="frmUploader" enctype="multipart/form-data" action="api/Upload/" method="post">
    <input type="file" name="uploader" multiple />
    <input type="submit" name="submit" id="btnSubmit" value="上传" />
  </form>
</body>
</html>
复制代码

建立后的目录结构react

终端运行: node app.js 上传文件 git

这个是在服务端页面创建上传功能，若是须要在用户使用则须要把当前连接放到前端 iframe 里：github

<iframe src='http://127.0.0.1:8080/'></iframe>
复制代码

这样就能够作前端使用上传功能express

本地上传文件

本地上传文件，服务端代码不变，在前端使用 fetch 和 FormData 处理（如下代码是react上使用例子）：api

import React from 'react';

class sendFile extends React.Component {
  
  onChange(e) {
    let file = e.target.files[0];
    let formData = new FormData();

    formData.append('uploader', file);

    fetch('http://127.0.0.1:8080/api/Upload', {
      method: 'POST',
      body: formData,
      // headers: {
      // 'Content-Type': 'multipart/form-data'
      // }
    })
  }

  render() {
    return (
    <div> <iframe src='http://127.0.0.1:8080/'></iframe> <br /> <form id="frmUploader" encType="multipart/form-data" method="post"> <input type='file' name='uploader' onChange={this.onChange} ></input> </form> </div>
    );
  }
}

export default sendFile;
复制代码

form表单里面的内容基本和服务端同样，关键处理是在 onChange 中把表单内容(file)用FormData转换，直接传递参数，运行后页面以下：

这样就能够不依赖服务端直接在用户端上传文件。

注意坑

上面注释掉的代码 'headers: { Content-Type': 'multipart/form-data } '，使用post请求时必须去掉headers，否则上传代码报错，这个问题卡了我一个下午（参考文章）里面有对这个问题单详细解释。