Загрузка изображений от реагировать с laravel API

Question

У меня проблемы с загрузкой файлов с реактивного входа с использованием laravel API. Я работаю с реактивной формой Моя форма и onSave выглядят следующим образом:

const onSave = data => {
        // data.picture = imgs; here I tried changing the picture to event.target.files from the file input, didn't work either.
        axios.defaults.headers.common["Authorization"] = "Bearer " + token;
        axios
            .post(`/api/products/store`, data, {})
            .then(res => {
                console.log(res);
            })
            .catch(err => console.log(err));
    };

return (
<form onSubmit={handleSubmit(onSave)} encType="multipart/form-data">
    <input
        type="file"
        name="picture[]"
        label="Product Picture"
        onChange={handlePicInput}
        className={classes.inputFile}
        multiple
        />
//other inputs
</form>
);

мой запрос к почте приводит к этому методу контроллера

 public function store(Request $request)
    {
        $imageNames = '';
        $pictures = (object) $request->file('picture');
        //$pictures = $request->allFiles();
        //$pictures = (object) $request->file('picture[]');
        //$pictures = (object) $request->files;
        foreach ($pictures as  $key => $picture) {
            /*WHEN I'M USING POSTMAN OR INSOMNIA, 
             this foreach loop is accessed but 
             the react form just skips the foreach completely */
            $imageNames = $imageNames . $picture->store('product_pictures', 'public') . ',';
        }

        $product = Product::create([
            'name' => $request->name,
            'prices_amountmax' => $request->prices_amountmax,
            'prices_amountmin' => $request->prices_amountmax,
            'brand' => $request->brand,
            'manufacturer' => $request->manufacturer,
            'weight' => $request->weight,
            'category_id' => $request->category_id,
            'stock' => $request->stock,
            'imageurls' => $imageNames
        ]);
        $product->save();
    }

Подводя итог, я протестировал загрузку изображений с почтальоном, он работает просто отлично, поэтому проблема должна быть в форме реакции? Спасибо за любую помощь

Answer 1

Попробуйте отправить его как formData, с несколькими файлами:

const onSave = data => {

  const formData = new FormData();
    for (let i in data) {
      if(i === 'picture[]'){
        for(let file of data[i]){
            formData.append('picture',file);
        }

      }else{
        formData.append(i, data[i])
      }  

    }
  // data.picture = imgs; here I tried changing the picture to event.target.files from the file input, didn't work either.
  axios.defaults.headers.common["Authorization"] = "Bearer " + token;
  axios
      .post(`/api/products/store`, formData, {})
      .then(res => {
          console.log(res);
      })
      .catch(err => console.log(err));
}; 

Я протестировал его с моим Node / Express бэкэндом, и, похоже, он работает. «картинка» будет массивом файлов. Если ваш php сервер не распознает это правильно, попробуйте изменить formData.append ('picture', file) на formData.append ('picture []', file), но тогда вам также нужно будет изменить имя в вашем php.

Answer 2

Для загрузки изображений с помощью js вы можете использовать FormData. Я не вижу, чтобы ваш метод handlePicInput понимал, как обрабатывается изменение ввода, но, возможно, этот фрагмент поможет вам понять, что делать дальше.

function handlePicInput(event){
    let images = event.target.files
    let fd = new FormData()
    fd.append("images", images);
}

Затем вы можете добавить к fd свои другие значения и отправить через топор ios

axios.post(`/api/products/store`, fd)

Опять же, где разместить код и как обрабатывать другие входные данные, которыми вы должны управлять самостоятельно, или предоставить больше данных