图片上传无法通过ajax Laravel进行

时间:2017-12-20 11:12:37

标签: javascript php ajax laravel

有一个奇怪的问题,我确定它与我的脚本抓取文件输入字段的值的方式有关。

我知道控制器功能有效,因为我已经能够通过手动提交表单而不使用ajax来实现。

我也知道ajax在发送和接收请求时起作用,因为我通过修改它来解析一个来回的字符串来测试它。

此外,我可以看到脚本正在抓取文件,因为当我选择文件时,它会在控制台中显示所选文件。

在我的浏览器中,我收到500错误,而在Laravel中,我只是得到了这个:

Symfony \ Component \ Debug \ Exception \ FatalThrowableError:在C:\ 123 \ app \ Http \ Controllers \ MyController.php:156

中的字符串上调用成员函数getClientOriginalExtension()

我尝试更新控制器以使用Request->徽标,但没有成功。

查看:

<form enctype="multipart/form-data" class="form-horizontal" method="POST" action="{{ url('studio/uploadLogo') }}">
    {{ csrf_field() }}
    <div class="form-group{{ $errors->has('studioname') ? ' has-error' : '' }}">            
                <label for="imageInput" class="col-md-4 control-label">Logo</label>
                <div class="col-md-6">
                    <input data-preview="#preview" name="logo" type="file" id="imageInput">
                    <img id="preview" src="" style="display: none"></img>
                    <input class="form-control" type="submit">
                </div>
            </div>
        </form>

脚本:

$('#imageInput').change(function (e) {
    e.preventDefault();
    var logo = $('#imageInput').val();
    console.log(logo);
    $.ajax({
        type: "POST",
        url: '/studio/uploadLogo',
        data: {logo: logo},
        success: function( data ) {
            console.log(data);
        }
    });
}); 

控制器:

public function uploadLogo() {
    $file = Input::file('logo')->getRealPath();
    $photoName = str_random(20) . '.' . Input::file('logo')->getClientOriginalExtension();
    Input::get('logo')->move(public_path('avatars'), $photoName);
    $response = array(
        'status' => 'success',
        'data' => $photoName
    );
    return \Response::json($response);
}

路线:

 Route::post('/studio/uploadLogo', 'MyController@uploadLogo');
 Route::get('/studio/uploadLogo', 'MyController@uploadLogo');

3 个答案:

答案 0 :(得分:1)

        You just change a view js script to submit like below
         $('.form-horizontal').submit(function(event){
            event.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : "/studio/uploadLogo", 
                data        : new FormData(this),
                contentType:false,
                processData:false,
            })
            .done(function(data,status){
                 //Your codes here
             });
        });


        and
        echo string response from controller like below
    ----------------
          $file=$request->file('logo');
          $uploaded_file_path='';
          if($file!=null) {
              $destinationPath = 'uploads';
              $uploaded=$file->move($destinationPath,$file->getClientOriginalName());  
              $uploaded_file_path= $uploaded->getPathName();
               $response = array(
                    'status' => 'success',
                    'data' => $uploaded_file_path
                );
          }else{
              $response = array(
                  'status' => 'failed',
                  'data' => $uploaded_file_path
              );          
          }     
         echo json_encode($response);
    ----------------

答案 1 :(得分:1)

在你的控制器中试试这个

public function uploadLogo() {
    $file = Input::file('logo')->getRealPath();
    $photoName = str_random(20) . '.' . Input::file('logo')->getClientOriginalExtension();
    Input::file('logo')->move(public_path('avatars'), $photoName);
    $response = array(
        'status' => 'success',
        'data' => $photoName
    );
    return \Response::json($response);
}

你已经给出了

  

输入:: get(&#39;徽标&#39;) - &gt;移动(public_path(&#39; avatars&#39;),$ photoName);

请将其更改为

  

输入::文件(&#39;徽标&#39;) - &gt;移动(public_path(&#39;头像&#39;),$ photoName);

你应该像ajax一样提交表格,就像@jalin评论一样(https://stackoverflow.com/a/47906201/4049692

希望这应该成为问题。 谢谢!

答案 2 :(得分:0)

尝试在脚本代码中添加processData: false, contentType: false

$('#imageInput').change(function (e) {
e.preventDefault();
var logo = $('#imageInput').val();
var form_data = new FormData();
form_data.append("logo",$("#imageInput")[0].files[0]);
console.log(logo);
$.ajax({
    type: "POST",
    url: '/studio/uploadLogo',
    data: {form_data},
    cache : false,
    processData: false,
    contentType: false
    success: function( data ) {
        console.log(data);
    }
});
}); 

尝试在控制器中获取值$request->logo

请在此处提及我的答案enter link description here