我正在开发一个ReactJS应用程序,需要上传用户图像。在文件输入的onChange事件中获取文件并将其传递给父组件,父组件将使用该数据进行POST请求。
服务器端我使用Express和Multer进行文件上传,客户端使用Fetch API上传图像。
提前感谢您的帮助 :)
服务器端我使用Express和Multer进行文件上传,客户端使用Fetch API上传图像。
提前感谢您的帮助 :)
我来帮忙翻译。这段内容和IT技术有关,需要上传文件/图像到Multer。如果没有表单enctype="multipart/form-data",就不能用Multer上传。从子组件中获取文件,然后:1)创建一个空表单,设置enctype="mutipart/form-data";2)当接收到文件时,创建一个新的FormData(引用我的表单);3)然后在formData中添加键和值;4)创建fetch.post()并且它可以工作 :) 这是参考提交的代码。
React父组件 Upload.js
import React, { Component } from 'react'
import { ImageWithoutForm } from "../app/components/ImageUpload";
export default class UploadFile extends Component {
onImageLoad(e){
console.log('onImageLoad', e.target.files[0]);
this.uploadForm(e.target.files[0]);
}
uploadForm(file){
let form = new FormData(this.refs.myForm);
form.append('myImage', file);
fetch('/upload-image', {
method: 'POST',
body: form
}).then(res => console.log('res of fetch', res));
}
render() {
return (
<div>
<h4>Upload Image</h4>
<ImageWithoutForm onImageLoad={(e)=>this.onImageLoad(e)} />
<form id="upload_form" ref="myForm" encType="multipart/form-data">
</form>
</div>
)
}
}
使用带有输入的React子组件来加载文件ImageWithoutForm.js
import React, { Component } from 'react'
export class ImageWithoutForm extends Component {
handleSubmit(e){
this.props.onImageLoad(e);
}
render() {
return (
<div>
<input type="file" onChange={(e)=>this.handleSubmit(e)}/>
</div>
)
}
}
从某人的Github仓库中获取的Express路由文件,并自定义了UploadImage.js
const express = require('express');
const multer = require('multer');
const path = require('path');
// Set Storage Engine
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function(req, file, cb){
cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
// Init Upload
const upload = multer({
storage: storage,
limits:{fileSize: 1000000},
fileFilter: function(req, file, cb){
checkFileType(file, cb);
}
}).single('myImage');
// Check File Type
function checkFileType(file, cb){
// Allowed ext
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);
if(mimetype && extname){
return cb(null,true);
} else {
cb('Error: Images Only!');
}
}
// Init app
const app = express.Router();
// Public Folder
app.use(express.static('./public'));
app.post('/', (req, res) => {
console.log('handling upload image');
upload(req, res, (err) => {
if(err){
console.log('first err', err);
res.send({
msg: err
});
} else {
if(req.file == undefined){
console.log('Error: No File Selected!')
res.send({
msg: 'Error: No File Selected!'
});
} else {
console.log('File Uploaded!')
res.send({
msg: 'File Uploaded!',
file: `uploads/${req.file.filename}`
});
}
}
});
});
module.exports = app;
在我的express app.js文件中,只需引入路由文件ImageUpload.js
然后像这样映射路由
var uploadImage = require('./routes/UploadImage');
server.use('/upload-image', uploadImage);