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