常见的前后端交互数据大部分都是json格式的数据,但是当涉及到图片、文件上传时,就需要用到form-data
格式的数据,以前我们要把input
标签的type属性设置为file格式,采用form提交的方式 需要把form的enctype
属性设置为multipart/form-data
,采用js提交的方式我们就需要手动new一个FormData
对象,对其加工处理之后再提交。在javascript已经蔓延至多领域的今天, 我们将从一个最简单的例子入手,去实现一个完整的图片上传功能。
初始化express项目
首先,初始化一个express项目,这部分就不赘述,初始化项目见express文档,之后新建app.js启动文件和public文件夹用户存放静态页面。
//app.js
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
复制代码
此时,运行node app.js
,即可在localhost:3000
浏览express项目。
编写前端静态页面
<!--public/upload.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请上传您的文件</title>
</head>
<body>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="upload" id="upload" multiple