给定图像 URL，Laravel 从 Javascript 上传图像答案

【问题标题】：Laravel upload image from Javascript given an image URL给定图像 URL，Laravel 从 Javascript 上传图像
【发布时间】：2018-06-22 10:23:56
【问题描述】：

我有一个从 html 画布中提取的 javascript 图像 URL，我想从该 URL 创建一个图像并将其上传到我在服务器中的存储文件。我可以将 ajax 发布请求中的 Url 发送到控制器中的 sendImagetoController 函数，或者如果有来自 javascript 的方法来执行此操作。我的路由都已定义和测试。请帮助我的 display.blade.php 。

<html>
    <head>
        <title>HeatMap Display</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script src='http://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js'></script>
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="{{ asset('js/jquery.js')}}" type="text/javascript"></script>
        <script src="{{ asset('js/app.js') }}" defer></script>
        <script src="{{ asset('js/heatmap.js' )}}" type="text/javascript"></script>

        <script>
            var coordinatesarray = @json($coordinates);
            var finalcoordinatesarr=[];
            var count=0;
            var mapId={{$targetHeatMap->id}};
            var mintime=10000000;
            var maxtime=0;
            var imgUrl="";
            coordinatesarray.forEach(element => {
                var cor={
                    'x' : coordinatesarray[count]['x'],
                    'y' : coordinatesarray[count]['y'],
                    'value' : coordinatesarray[count]['time_spent']  
                };
                if(mintime>coordinatesarray[count]['time_spent']){
                    mintime=coordinatesarray[count]['time_spent'];}
                if(maxtime<coordinatesarray[count]['time_spent'])
                    maxtime=coordinatesarray[count]['time_spent'];

                finalcoordinatesarr.push(cor);
                count++;                           
            });

            console.log(finalcoordinatesarr);
            function load(){
                renderCanvas();
            }

            function renderCanvas(){
                var heatmapInstance = h337.create({
                container: document.getElementById('heatMap')
                });
                var testData = {
                        min: mintime,
                        max: maxtime,
                        data:finalcoordinatesarr
                };
                heatmapInstance.setData(testData);
                imgUrl = (document.getElementById("heatMap").childNodes[0]).toDataURL();
                document.getElementById("heatMapPic").src=imgUrl;
            }
            sendImageToController();


            function sendImageToController(){
                formdata = new FormData();
                if($('#heatMapPic').prop('files').length>0){
                    file = $('#heatMapPic').prop('files');
                    formdata.append("heatMapPic",file);
                }
                formdata.append('tagetHeatMap',$('#targetHeatMap').val());
                $.ajaxSetup({
                    headers: { 'X-CSRF-Token' : $('meta[name="csrf-token"]').attr('content') } 
                    });
                $.ajax({
                    url: "{{route('HeatMap.moveToStorage')}}",
                    data: formdata,
                    type:'post',
                    // traditional:true,
                    success:function(response){
                        console.log("correct");
                        console.log(response);
                    },
                    error:function(e){
                        console.log("errrooooor");
                        console.log(e);
                    },
                });
                console.log("hi");

            }

        </script>
    </head>
    <body onload="load()">
        <form id="form" enctype="multipart/form-data">
            @csrf
        <input type="file" id="heatMapPic" name="heatMapPic" src=""/>
            <input type="text" id="targetHeatMap" value="{{$targetHeatMap}}"/>
        </form>


            <div id="heatMap" style="height:740px"></div>
                <a-scene>
                    {{-- <a-sky radius=10 opacity="0.8" src="{{asset('uploads/heat_map_images/'.$targetHeatMap->heatmap_image)}}"></a-sky> --}}
                    {{-- <a-sky radius=10 src="{{asset('uploads/'.$imageName)}}"></a-sky> --}}

                </a-scene> 

            </body>
</html>

我的控制器方法

  public function moveToStorage(Request $request){
        return 'hello';

        }

【问题讨论】：

你能澄清一下实际的问题是什么吗？您的控制器显然还没有处理 POST 请求，您是在问怎么做吗？
现在用于将图像存储在存储中的方法不起作用（它甚至没有到达控制器以返回你好）并且正在寻找一种方法来从 javascript 保存我的图像或将我的 url 发送为向控制器发送文本并在那里完成工作
查看您的代码，您似乎正尝试在实际呈现图像之前发送图像。您需要在load 函数中移动sendImageToController()，在renderCanvas() 之后。此外，不需要所有 formData 的东西。只需将.toDataURL() 的结果原样发送到服务器，然后使用base64_decode() 将其转回图像。

标签： javascript php html ajax laravel

【解决方案1】：

如果您有可公开访问的网址，那么您可以像这样使用它

public function moveToStorage(Request $request){
      $data = $request->all();
      $url = $data['file_url'] ; //file url that you have in javascript
      $contents = file_get_contents($url);
      $name = substr($url, strrpos($url, '/') + 1);
      Storage::put($name, $contents); 

      return 'hello';
}

或者，如果您的文件以 base64 格式发布，那么试试这个

public function moveToStorage(Request $request){
      $data = $request->all();
      $file = $data['file_url']; //base64 encoded image
      $file = substr($file, strpos($file, ",")+1);
      $imgeData = base64_decode($file);
      $contents = file_get_contents($imgeData);
      Storage::put("test.png", $contents); 

      return 'hello';
}

【讨论】：

嗨，我试过了，但卡住了：“消息”：“file_get_contents()：文件名不能为空”，错误。只是为了澄清从 display.blade.php 发送到控制器 moveToStorage 的 imageUrl只是一个字符串 URL 而不是文件
您是在发送文件 url 吗？检查它打印$data。 dd($data) 和 url 应该是可访问的
是的，我尝试打印（dd）他们现在到达控制器的数据和 URL 广告
文件名是什么？
你的意思是我想在存储中命名 myimage 吗？任何 test.png 现在。或 URL 变量 :imgUrl

【解决方案2】：

查看您的代码，您似乎正试图在图像实际呈现之前发送图像。您需要将sendImageToController() 移动到您的load 函数中，在renderCanvas() 之后。

另外，不需要所有 formData 的东西。只需将.toDataURL() 的结果原样发送到服务器，然后使用base64_decode() 将其转回图像。

以下是相关更改：

function load() {
  renderCanvas();
  sendImageToController(); // send to server AFTER rendering
}

var imgUrl;

function renderCanvas() {
  // ...
  imgUrl = (document.getElementById("heatMap").childNodes[0]).toDataURL();
  // ...
}

更短的 AJAX 代码：

function sendImageToController() {
  $.ajaxSetup({
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
  });
  $.post("{{route('HeatMap.moveToStorage')}}", {
      heatmap: imgUrl  // global var set in renderCanvas()!!
    })
    .done(function(response) {
      console.log("correct");
      console.log(response);
    })
    .fail(function(e) {
      console.log("errrooooor");
      console.log(e);
    });
}

在服务器上，获取heatmap 参数。

public function moveToStorage(Request $request){
  $heatmap = $request->input('heatmap');
  $base64 = explode(",", $heatmap)[1];
  $binary = base64_decode($base64);
  // store $binary data in PNG file
  return 'image saved successfully';

}

【讨论】：

【解决方案3】：

我在 PHP 中使用这种方法，文件本身通过变量 $_FILES() 来到 php 并且在主查询中不可见。

<?php
    putenv("upload_tmp_dir=/var/www/site.com/public_html/upload/");
    $uploadDir = getenv("upload_tmp_dir");
    $uploadFile = $uploadDir . basename($_FILES['userfile']['name']);
    move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadFile);
?>

然后就可以在$uploadFile变量的路径中打开文件了

【讨论】：