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

我是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));

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

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

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


}

响应：

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

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

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

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


}

OnChange:

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

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

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

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


}

JSX:

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

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

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

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


}

---

我想您应该请求多次，因为使用循环存在文件

当您以多部分形式请求文件数组时，多部分形式不包括您的所有文件。所以你应该单独发送上传请求

• 检查注释后，我添加了一些示例代码

OnChange:

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

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

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

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


}

handleChangeImage（e）{
//设置文件列表
让files=e.target.files；
files.map（（文件）=>{
//为每个文件和请求生成不同的formData。
设formData=new formData（）；
append（'myFile'，file）；
post（'/api/save_gallery_相册_image'，formData）
。然后（响应=>{
控制台日志（响应）；
}).catch（error=>（error.response））；
});
}

我面临的问题与我已经解决的问题相同，希望这对您有所帮助

把这个代码放在正确的地方，检查它的工作上传多个图像谢谢

<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
}

this.HandleProductImage（e）}/>
此。提交格式（e）}>
HandleProductImage=e=>{
这是我的国家({
产品图片：e.target.files
});
};
submitForm=e=>{
const product=new FormData（）；
if（此.state.product\u图像）{
for（此.state.product\u映像的常量文件）{
product.append（“图像”，文件）；
}
}
//然后使用API发送表单数据
}

元素名称属性的格式如下：

然后您可以在laravel中访问它：

$images=$request->file（'images'）；如果（$request->has（'images'）{//loop-through

foreach（$images as$image）{$image->}

@user3647971我使用表单数据为什么有人会放弃我的问题？他们是否需要改进？您可以参考此问题来解决您的问题：