react-express文件上传

前台使用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将信息保存到数据库中。