我想显示由发送的图像。
我想显示由发送的图像。
提问于 2022-06-09 05:13:57
我想发送一个图像与反应公理，并返回一个字符串，但我这里有一个问题。后端是一个API，它放置一个图像并返回一个字符串。
我想问个问题。
- 如何显示要在屏幕上发送的图像？
- 如何显示发送图像后返回的字符串？
import React from 'react'
import axios from 'axios';
class FileUpload extends React.Component{
constructor(){
super();
this.state = {
selectedFile:'',
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({
selectedFile: event.target.files[0],
})
}
submit(){
const data = new FormData()
data.append('file', this.state.selectedFile)
console.warn(this.state.selectedFile);
let url = "http://localhost:8000/upload.php";
axios.post(url, data, { // receive two parameter endpoint url ,form data
})
.then(res => { // then print response status
console.log(res.data)
})
}
render(){
return(
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br /><br />
<h3 className="text-white">React File Upload Example - Tutsmake.com</h3>
<br />
<div className="form-row">
<div className="form-group col-md-6">
<label className="text-white">Select File :</label>
<input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
</div>
</div>
<div className="form-row">
<div className="col-md-6">
<button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>名前確認</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default FileUpload;回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-09 10:03:00
如果我能理解
这是如何获得选定图像的预览。
const [file] = e.target.files;
setImgPrev(URL.createObjectURL(file));
// imgPrev state will be the src of your preview image要获得发送html请求后返回的字符串，您必须侦听来自axios的响应。
axios.post(url, data)
.then(res => setRes(res))
.catch(err => return err)Stack Overflow用户
发布于 2022-06-09 09:49:13
我已经制作了图像上传器，并在发送到BE with API之前预览了上传的图像。我还使用类型文件的普通html输入。也许我的代码可以用在你的。
const handleImageChange = (value) => {
let reader = new FileReader();
const image = value.target.files[0];
setSavedFile(image);
reader.onload = () => {
setMainImage({
img: reader.result,
});
};
reader.readAsDataURL(image);
}
...
...
<input
onChange={(e) => handleImageChange(e)
/>将用setMainImage()保存的图像，图像源在reader.result中。因为setSavedFile用于保存上传的文件。
对于第二个问题，您通常可以将响应从API保存到state，并在html元素中显示状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72554995
复制相关文章
相似问题
腾讯云开发者
