ReactJS: Как отправить несколько файлов на сервер (Laravel)

Question

Я новичок в ReactJS, и мой бэкэнд - laravel, и у меня проблема с вставкой нескольких файлов в базу данных, однако, если я использую только одну загрузку (вставка одного файла в базу данных, это работает для меня.).

ПРОБЛЕМА: относительно вставки нескольких файлов в базу данных.

ЦЕЛЬ: Чтобы вставить несколько файлов в базу данных

У меня здесь

FORMDATA:

const formData = new FormData();
formData.append('myFile', this.state.image);

ОТВЕТ:

axios.post('/api/save_gallery_album_image', formData).then(response => {
                console.log(response);
            }).catch(error => (error.response));

OnChange:

handleChangeImage(e){
    this.setState({
        image:e.target.files[0]
    })

    // console.log(e.target.files);
}

JSX:

<label>Image</label>
<div className="custom-file">
<input type="file" 
name="image"
multiple
onChange={this.handleChangeImage}
className="custom-file-input form-control" 
accept="image/x-png,image/gif,image/jpeg" 
id="file_selected"/>
<label className="custom-file-label" htmlFor="validatedCustomFile">Choose file...</label>
</div>

Контроллер на стороне сервера:

public function save_gallery_album_image(Request $request)
{
    $multiple_gallery_file_upload = $request->file('myFile');
    $titleValue = $request->get('titleValue');
    $pageValue = $request->get('pageValue');
    $now = new DateTime();

    if($request->hasFile('myFile'))
    {
        foreach($multiple_gallery_file_upload as $myfiles)
        {
            $uniqueid=uniqid();
            $original_name=$request->file('myFile')->getClientOriginalName(); 
            $size=$request->file('myFile')->getSize();
            $extension=$request->file('myFile')->getClientOriginalExtension();

            $name=$uniqueid.'.'.$extension;
            $path=$request->file('myFile')->storeAs('public',$name);

            DB::insert('INSERT INTO album_category (cid,image,created_at) VALUES (?,?,?) ',[

                $titleValue,
                $name,
                $now


            ]);

        }

        return response()->json('Input Saved');
    }


}

Answer 1

Я столкнулся с той же проблемой, которую я исправил вот так. Надеюсь, она вам пригодится.

Поместите этот код в нужное место и проверьте, работает ли он для загрузки нескольких изображений. Спасибо.

<form>
<input name="product_image" type="file" multiple onChange={e => this.HandleProductImage(e)}/>
<button type="submit" onClick={e =>this.submitForm(e)}>
</form>


HandleProductImage = e => {
    this.setState({
      product_image: e.target.files
    });
  };

submitForm = e => {
     const product = new FormData();
     if (this.state.product_image) {
        for (const file of this.state.product_image) {
          product.append("image", file);
        }
      }
    //then use your API to send form data
}

Answer 2

Полагаю, вам следует запрашивать несколько раз, поскольку файлы существовали с использованием цикла.

Когда вы запрашиваете массив файлов в многочастной форме, многочастная форма не включает все ваши файлы.Поэтому вы должны отправлять запросы на загрузку отдельно.

• После проверки комментария я добавил пример кода.

OnChange:

handleChangeImage(e) {
  // Set file list
  let files = e.target.files;
  files.map((file) => {
    // make diffent formData per each file and request.
    let formData = new FormData();
    formData.append('myFile', file);
    axios.post('/api/save_gallery_album_image', formData)
      .then(response => {
        console.log(response);
      }).catch(error => (error.response));
  });
}

Если вы хотите сохранить несколько файлов в одном запросе, я думаю, вам также следует изменить свои серверные коды.

Пока ваш сервер можетсохранить только один файл на один запрос.