在Vue JS前端中上传图像并在没有数据库的laravel刀片中显示

Question

我有一个带有Vue JS前端的laravel项目。它是发票制造商。我从计算机上传图像，它在vue js预览中显示就很好。现在，它必须转到控制器并使用Dom PDF吐出PDF。但是，该图像未打印。如何排序？

我的上传图像的vue方法。

onFileChange(e) {
    const file = e.target.files[0];
    this.url = URL.createObjectURL(file);
}

提交和返回pdf的Vue方法

          onSubmit(){           
                axios({
                    url: '/invoice_post',
                    data: this.$data,
                    method: 'POST', 
                    responseType: 'blob',                   
                }).then(response => {
                console.log(response);
                  const url = window.URL.createObjectURL(new Blob([response.data]));
                  const link = document.createElement('a');
                  link.href = url;
                  link.setAttribute('download', 'file.pdf');
                  document.body.appendChild(link);
                  link.click();
                }).catch(error => {
                    if (error.response.status === 422) {
                      this.errors = error.response.data.errors || {};
                    }
                });             
            }, 

控制器

public function post(Request $request)
{        
    $data = $request;
    $pdf = PDF::loadView('invoice.pdf', compact('data'));
    $pdf->setPaper('a4' , 'portrait');

    return response()->json($request, 200);
}

这是图像出现的视图部分

<img src="{{$data.url }}" style="width:100%; max-width:300px;">

我猜图像是作为Blob发送到控制器的。这是它在pdf中的外观的屏幕截图。有人可以建议如何解决此问题吗？客户可以上载任何图像类型作为徽标，并且必须以pdf显示。该项目未使用数据库。