# node+express實現圖片上傳功能
###### tags: `Node.js`
## 安裝express
安裝在資料夾中
安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径。
```shell=
sudo npm install express --save
```
## 新建package.json
package.json
它是一種 CommonJS 規定用來描述包的文件，
是一個包含 json 格式的說明文件，
裡面可以定義相依的相關套件以及應用程式的資訊
```jsonld=
{
"name": "node-app",
"version": "1.0.0",
"dependencies": {
"express": "^4.16.2"
}
}
```
接著運行
```shell=
sudo npm install
```
## 新建app.js
```javascript=
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
```
運行node app.js，
打开localhost:3000，应用已经跑起来了
## 在 Express 中提供靜態檔案+處理上傳的圖片
上面的app.js只是單純的hello world程式
接下來要透過Express提供static的檔案
如果要提供影像、CSS 檔案和 JavaScript 檔案等之類的靜態檔案，
請使用 Express 中的 express.static 內建中介軟體函數。
而這邊我們是使用網頁
所以透過html進行
- start.html
```htmlembedded=
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>請上傳您的文件</title>
</head>
<body>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple="multiple">
<input type="submit" value="Upload file" />
</form>
</body>
</html>
```
- upload.html
```htmlembedded=
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>上傳成功</title>
</head>
<body>
<h1>上傳成功</h1>
<img src="/public/test.png"/>
</body>
</html>
```
- app.js (最終版)
```javascript=
var express = require('express');
var app = express();
var formidable = require("formidable");
fs = require("fs");
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.use('/public', express.static('public'));
app.post('/upload', function (req, res) {
var form = new formidable.IncomingForm();
console.log("about to parse");
form.parse(req, function(error, fields, files) {
console.log("parsing done");
console.log(files.upload.path);
fs.writeFileSync("public/test.png", fs.readFileSync(files.upload.path));
res.redirect("/public/upload.html") ;
});
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
```
Sign in with Wallet
Connect another wallet