コンピューターから選択した画像をWebアプリに表示しようとしています。私が修正しようとしている質問に対処する次の質問を参照しました。
私は私のようなhtml部分を持っています
<div className="add_grp_image_div margin_bottom">
<img src={img_upload} className="add_grp_image"/>
<input type="file" className="filetype" id="group_image"/>
<span className="small_font to_middle">Add group image</span>
<img id="target"/>
</div>
選択した画像を表示したい
<img id="target"/>
これどうやってするの?
FileReader
docsも参照しました。
これを試して
<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>
クラスにメソッドを追加
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
reader.onload = (e) => {
this.setState({image: e.target.result});
};
reader.readAsDataURL(event.target.files[0]);
}
}
または、URL.createObjectURL
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
this.setState({
image: URL.createObjectURL(event.target.files[0])
});
}
}
そして表示画像
<img id="target" src={this.state.image}/>
それがあなたのために働くことを願って
<form onSubmit={form => submitForm(form)}>
<input
accept="image/*"
onChange={onImageChange}
className={classes.inputImage}
id="contained-button-file"
multiple
name="image"
type="file"
/>
<label htmlFor="contained-button-file">
<IconButton component="span">
<Avatar
src={mydata.imagePreview}
style={{
margin: "10px",
width: "200px",
height: "200px"
}}
/>
</IconButton>
</label>
<Button
type="submit"
variant="outlined"
className={classes.button}
>
Default
</Button>
</form>
onImageChange
const onImageChange = event => {
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
let file = event.target.files[0];
reader.onloadend = () => {
setData({
...mydata,
imagePreview: reader.result,
file: file
});
};
reader.readAsDataURL(file);
}
};
submitForm
const submitForm = form => {
form.preventDefault();
const formData = new FormData();
formData.append("image", mydata.file);
// for (var pair of formData.entries()) {
// console.log(pair[1]);
// }
const config = {
headers: {
"content-type": "multipart/form-data"
}
};
axios
.post("api/profile/upload", formData, config)
.then(response => {
alert("The file is successfully uploaded");
})
.catch(error => {});
};