“Загрузить изображение реагировать” Ответ

Загрузка изображения в React JS

import { useState } from 'react';

function App() {
  const [imgfile, uploadimg] = useState([])
  	console.log("Image FIles",imgfile);
  const imgFilehandler = (e) => {
    if (e.target.files.length !== 0) {
      uploadimg(imgfile => [...imgfile, URL.createObjectURL(e.target.files[0])])
    }
  }
  return (
    <div className="App">
      <div>
        <center>
          <h2>Upload</h2>
          <input type="file" onChange={imgFilehandler} />
          <hr />
          <h2>Preview</h2>
          {imgfile.map((elem) => {
            return <>
              <span key={elem}>
                <img src={elem} height="200" width="200" alt="med1" />
              </span>
            </>
          })}
        </center>
      </div>
    </div>
  );
}
export default App;
Abhishek

Загрузить файл в React

const upload = (e) => {
	console.warn(e.target.files)
	const files = e.target.files
	const formData = new FormData()
	formData.append('img', files[0])
	fetch('http://127.0.0.1:8000/api/store', {
		method: 'POST',
		body: formData,
	}).then((resp) => {
		resp.json().then((result) => {
			console.warn(result)
		})
	})
}
return(<div>
	<h1>Upload File in React js</h1>
	<input type='file' onChange={(e) => upload(e)} name='img' />
</div>)
Abhishek

Загрузить изображение реагировать

import React, { useState } from "react";

const UploadAndDisplayImage = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  return (
    <div>
      <h1>Upload and Display Image usign React Hook's</h1>
      {selectedImage && (
        <div>
        <img alt="not fount" width={"250px"} src={URL.createObjectURL(selectedImage)} />
        <br />
        <button onClick={()=>setSelectedImage(null)}>Remove</button>
        </div>
      )}
      <br />
     
      <br /> 
      <input
        type="file"
        name="myImage"
        onChange={(event) => {
          console.log(event.target.files[0]);
          setSelectedImage(event.target.files[0]);
        }}
      />
    </div>
  );
};

export default UploadAndDisplayImage;
Vivacious Vicuña

Как загрузить изображение в React JS

import FileBase64 from "react-file-base64";
// FileBase64 <- use as component

<FileBase64 
	type="file"
    multiple={false} <- if want to upload multiple images set "true"
    onDone={} <- take callback function
/>

// onDone return an object of: filename, fileType, base64 data
// use the setState or function of useState to grap the base64 data
Concerned Chimpanzee

Ответы похожие на “Загрузить изображение реагировать”

Вопросы похожие на “Загрузить изображение реагировать”

Больше похожих ответов на “Загрузить изображение реагировать” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel