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;
複製代碼