ReactJs Функциональный компонент | Ввод файла | С формой | Загрузить изображение как Laravel способом - PullRequest
Новая
       7

ReactJs Функциональный компонент | Ввод файла | С формой | Загрузить изображение как Laravel способом

0 голосов
/ 03 августа 2020

У меня есть эта форма ReactJs с использованием Laravel React ui scaffolding . Как я могу загрузить изображение с другими данными в моей форме?

AddProduct. js

...
const AddProduct = () => {
  
  *//state*
  const initialProductState = {
    id: null,
    image: "",
    category_id: "1",
    name: "",
  };
  const [product,setProduct] = useState(initialProductState);
  ...

  *//handle controlled input change*
  const handleInputChange = event => {
    const {name,value} = event.target;
    setProduct({...product, [name]:value });
  }
  
  *// handle file input change*
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    console.log(file);
  }
  
  *//Form Submit*
  const onSubmit = (event) => {
    event.preventDefault();

    let data = {
      category_id: product.category_id,
      image: product.image,
      name: product.name
    };
    console.log(data);

    axios.post(`/api/products`,data)
    .then(response => {
       setProduct({...})
    })
    .catch(e=>{
       console.log(e)
    });

    ... *proceed to return*

AddForm. js 

return (
  <form onSubmit={onSubmit}>
    <select id="category_id" name="category_id" onChange={...}>...</select>
    <input type="file" onChange={handleFileChange} value={product.image}/>
    <input type="text" value={...} onChange={...}/>
    <button type="submit">submit</button>
  </form>
)

Как видно из кода, я изначально объявляю состояние, включающее все входы. Теперь вопросы.

  1. Как я могу указать имя изображения во входном значении файла?
  2. Как я могу включить изображение вместе с другими входными данными формы? - Я видел несколько руководств о том, как загрузить изображение, но они фокусируются только на вводе файла.
  3. Могу ли я столкнуться с каким-либо преобразованием?
  4. Каков правильный способ объявление onChange для ввода файла?
...