前臺使用superagent發送請求，后臺使用express的multer實現文件的上傳。

概述

• 使用express的multer實現文件上傳
• 使用superagent發送請求
• FileReader對象實現圖片無刷新顯示

配置環境

npm install multer --save

項目的目錄結構

目錄結構

FileReader實現圖片的顯示

FileReader主要用于將文件內容讀入內存，通過一系列異步接口，可以在主線程中訪問本地文件。使用FileReader的readAsDataURL(file)的方法將文件的內容以data:url的字符串形式表示，在獲取文件內容成功后，使用onload方法將獲取的內容進行顯示。

//components/imageUpload.js
import React,{Component} from 'react';

class Image extends Component{

    isClick(){
        let  input=this.refs.file;
        let  img=this.refs.image;
        if(input.files&&input.files[0]){
            var fileObj=new FileReader();//實例化一個FileReader對象
            fileObj.onload=function(event){//屬性綁定方法
                img.src=event.target.result;

            };
            fileObj.readAsDataURL(input.files[0]);

        }
  }
render() {
        return (
            <div>
                <div>
                    <label className="location">照片：</label>
                    <input type="file" ref="file" className="fileStyle" onChange={this.isClick.bind(this)}/>//利用input的變化無刷新的顯示圖片
                </div>
                <div>
                    <img src="" className="imgType" ref="image"/>
                </div>
            </div>
        )
    }
}
export default ImageUploads;

superagent執行上傳

FormData會將數據格式化，再以POST方法上傳文件，使用react的ref屬性來獲取選擇的文件。

//components/imageUpload.js

import request from 'superagent';

handleClick(){
        let formData=new FormData();
        let  input=this.refs.file;
        let file=input.files[0]
        formData.append('avatar',file);
        request
            .post('/profile')
            .send(formData)
            .end((err,res)=>{
                console.log(res.body.filePath);
                this.props.uploadImage(res.body.filePath);  
            });
    }

express接受文件

//server.js
const express = require('express');
const path = require('path');
const multer = require('multer');  //引入express的multer模塊

//選擇diskStorage存儲
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, path.resolve('public/uploads'));
    },  // 保存的路徑，備注：需要自己創建
     filename: function (req, file, cb) {
        // 將保存文件名設置為  時間戳+字段名
        cb(null, Date.now() + path.extname(file.originalname));
    }
});

const upload = multer({storage: storage});

const app = express();

app.use(express.static('public'));  //將public文件夾下面的所有文件暴露出來

app.post('/profile', upload.single('avatar'), (req, res, next)=> {
    res.send({
        err: null,
        //filePath文件在項目中的保存路徑
        filePath: 'uploads/' + path.basename(req.file.path)
    });
}); 

詳細的代碼，請戳這里：項目地址，項目中還包含redux和mongodb將信息保存到數據庫中。