Question

我一直在尝试使用base64上传多张图片，但它仅上传第二张图片。是否可以通过larvel-vueJS而不是base 64上传图像？

这是Vue-js方法：

updateIMG(e){
                // console.log('uploaded');
               let file = e.target.files[0]
               let reader = new FileReader();
               if(file['size'] < 9111775){
                   reader.onloadend = (file) => {
                       this.landingform.logo = reader.result;
                       this.landingform.landingBg = reader.result;
                   }
                   reader.readAsDataURL(file)            
               }else {
                   swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'You are uploading a large fiel!',
                        footer: 'You are authorized to upload files less than 10MB.'
                    })
               }

这样调用的方法：

<input type="file" @change="updateIMG" name="logo" class="form-input">

这是我的控制器：

public function updateLanding(Request $request)
    {

        $landnginIMG = LandingImage::whereIn('id', [1]);

         if ($request->logo){
            $name = time().'.' . explode('/', explode(':', substr($request->logo, 0, 
            strpos($request->logo, ';')))[1])[1];

            \Image::make($request->logo)->save(public_path('img/landing/').$name);
            $request->merge(['logo' => $name]);

        };
        if ($request->landingBg){
            $bgname = time().'.' . explode('/', explode(':', substr($request->landingBg, 0, 
            strpos($request->landingBg, ';')))[1])[1];

            \Image::make($request->landingBg)->save(public_path('img/landing/').$bgname);
            $request->merge(['landingBg' => $bgname]);
        };

        $landnginIMG->update([
            'logo'=> $request ['logo'],
            'landingBg'=> $request ['landingBg'],
            ]);
        return ['message' => 'all is done'];
    }

Answer 1

请检查是否有帮助：

多个图像上传的https://picupload.netlify.app/的Vuejs示例 VueJS代码仓库https://github.com/manojkmishra/dw_take5

相关文件-https://github.com/manojkmishra/dw_take5/blob/master/src/components/ImageUploader.vue

PHP [Laravel]部分位于防火墙后面，因此上载提交将无法在Intranet之外进行。这是控制器功能代码

public function imagesupload(Request $request){
   if (count($request->images)) {
    foreach ($request->images as $image) {
        $image->store('images');
    }
 }
 return response()->json(["message" => "Done"]);
 }

Answer 2

您必须遵循一些因素。

第一

您的表单应允许您选择多个文件

第二

您的JavaScript在被选中时必须处理所有这些文件。检查代码的这一行。

 // console.log('uploaded');
 let file = e.target.files[0]
 let reader = new FileReader();

e.target.files[0]正在获取第一个文件。您应该循环浏览所有文件。

let files = e.target.files;

现在，使用JavaScript foreach循环并将每个文件转换为base64并将它们存储在数组中。然后，将该阵列发送到服务器。

在服务器上，执行相同的操作。您将收到一个数组，因此您应遍历每个数组并将其转换回图像并保存。

谢谢。

如何在Laravel和Vue-js中使用base64上传多个图像

2 个答案: