weixin_34407348
weixin_34407348

express实现图片上传

常见的前后端交互数据大部分都是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项目。

编写前端静态页面




<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="multiple" value="" />
      <input type="submit" name="" id="" value="点击上传" />
    form>
  body>
html>
复制代码

此页面通过文件类型的input上传文件，并通过form提交formdata格式的数据。



<html>
  <head>
    <meta charset="UTF-8">
    <title>上传成功title>
  head>
  <body>
    <h1>上传成功h1>
    <img src="/public/test.png"	/>
  body>
html>
复制代码

此页面为上传文件后的反馈页面，预览上传的图片。

配置upload API

In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.

由于在新版本express 4中，req.files不可用，所以我们需要借助npm包，这里我们借助的是formidable，请自行安装。

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('parse done')
    console.log(files.upload.path);
    // 读取文件流并写入到public/test.png
    fs.writeFileSync('public/test.png', fs.readFileSync(files.upload.path));
    //重定向到结果页
    res.redirect('/public/result.html');
  })
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
复制代码

** 这个简单的图片上传案例，可以更好的帮助我们了解图片上传的流程，下面我们借助element-ui的upload组件还原真实项目的案例。**

upload上传组件