ReactJS：如何在服务器中发送多个文件（Laravel）答案

【问题标题】：ReactJS: How to send multiple files in server (Laravel)ReactJS：如何在服务器中发送多个文件（Laravel）
【发布时间】：2018-10-19 00:57:37
【问题描述】：

我是 ReactJS 的新手，我的后端是 laravel，我在将多个文件插入数据库时遇到问题，但是如果我只使用单个上传（将一个文件插入数据库，它对我有用。）。

问题：关于在数据库中插入多个文件。

目标：将多个文件插入数据库

这里有

表格数据：

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');
    }


}

【问题讨论】：

<input>元素名称属性需要这样格式化：<input name="images[]" multiple/>然后你可以在laravel中访问它：$images = $request->file('images'); if($request->has('images'){//loop throughforeach($images as $image){$image->}
@user3647971 我使用表单数据
为什么有人会拒绝我的问题？他们需要改进吗？
你可以参考这个问题来解决你的问题：stackoverflow.com/questions/55596514/…>

标签： javascript reactjs laravel

【解决方案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
}

【讨论】：

【解决方案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));
  });
}

如果您想在一个请求中保存多个文件，我认为您还应该更改您的服务器端代码。

目前，您的服务器每个请求可能只保存一个文件。

【讨论】：