Так что в основном я новичок в реагировании и не смог найти ни одного документа или ресурсов, касающихся одновременной загрузки изображения и входного значения.
Одно решение Form Data
, но оно не работает должным образом
Другой метод - Serialize
, но я не могу найти документ, объясняющий способ использования в React.
Так что для меня и новичков в React было бы здорово узнать об этом, если бы кто-нибудь мог мне помочь.
Вы можете попробовать следующий метод, который вы можете использовать multer с экспрессом для обработки загруженных данных файла.
Реагировать файл
import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
class App extends Component {
handleFileChange = e => {
this.setState({ file: e.target.files[0] });
};
handleChangeEvent = e => {
this.setState({ text: e.target.value });
};
upload = () => {
if (this.state.file) {
let data = new FormData();
data.append("file", this.state.file);
data.set("data", this.state.text);
axios
.post("http://yourhost/file", data)
.then(response => console.info(response))
.catch(error => console.info(error));
}
};
render() {
return (
<div>
<input type = "text" onChange = {this.handleChangeEvent} />
<input type = "file" onChange = {this.handleFileChange} />
<input type = "button" onClick = {this.upload} value = "Upload" />
</div>
);
}
}
export defaults App;
экспресс-серверная сторона
const express = require('express');
const app =express();
const path = require('path');
const cors = require('cors')();
const bodyParser = require('body-parser');
const multer = require('multer')
const port =process.env.PORT || 3000;;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended:true
}));
app.use(cors);
const storage = multer.diskStorage({
destination: __dirname +'/media/',
filename(req, file, cb) {
console.info(file);
cb(null, `${file.originalname}-${new Date()}`);
}
});
const upload = multer({ storage });
app.post('/file',upload.single('file'), function(req, res) {
console.info(req.body.data);
console.info(req.files);
});
app.listen(port,()=> console.info('Running on port: '+port));
@bharathi нет необходимости делать это, вы можете использовать formdata
ВАУ, ЭТО РАБОТАЕТ КАК ШАРМ, ВЫ ВЕЛИКОЛЕПНЫ
Мне тоже помогло :). Но можете ли вы сказать мне, что такое ( .append("file") & (.append("data") ? Можем ли мы назвать это как угодно? Или это специально для formdata?
@ThanveerShah да, вы можете назвать это как угодно. append () принимает 2 параметра: первый — ключ, а другой — стоимость.
Разве мы не должны использовать URL.createObjectURL(e.target.files[0])?