如何在 laravel & vue-js 中使用 base64 上传多张图片

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

请检查这是否有帮助：

Vuejs多图上传示例https://picupload.netlify.app/ VueJS 代码回购 https://github.com/manojkmishra/dw_take5

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

PHP[Laravel] 部分在防火墙后面，因此上传提交在内网之外无法正常工作。这里是控制器功能代码

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

Answer 2

有几个因素是您必须遵循的。

第一

您的表单应该允许您 select 多个文件

第二

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

 // 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 上传多张图片

How to upload multiple images with base64 in laravel & vue-js

base64

file-upload

laravel

vue.js