使用 ajax 使用 laravel 上传图片答案

【问题标题】：upload image with laravel using ajax使用 ajax 使用 laravel 上传图片
【发布时间】：2018-01-25 21:22:48
【问题描述】：

我有表用户：

id (int)
名字（字符串）
姓氏（字符串）
电子邮件（字符串）
登录（字符串）
密码（字符串）
图片（文字）

我想使用 ajax jquery 在我的数据库中插入图片。

但在给定的数据库级别，它不会将数据与图像一起插入。

我尝试使用此代码，但不起作用。

控制器：

 public function addUser(Request $request){
        $user = new User();
        $user->lastName = $request->lastName;
        $user->firstName = $request->firstName;
        $user->email = $request->email;
        $user->login = $request->login;
        $user->password = bcrypt($request->password);

        if($request->has('image') ) {
                $file_local =  $request->file('image');
                $extension = $request->file('image')->getClientOriginalExtension();
                if($extension == 'jpg' || $extension == 'png' || $extension == 'jpeg'){
                  $name=$request->file('image')->getClientOriginalName();
                  $path = $file_local->storeAS('public/',$name);

                   $user->image = $name;
              }   
          }
        $user->save();

        return response()->json($user);   
    }

查看：

<form enctype="multipart/form-data">
    <div class="form-group">
              <input type="text" id="lastName" class="form-control" placeholder="last Name" required />

            </div>
            <div class="form-group">
              <input type="text" id="firstName" class="form-control" placeholder="name" required />
            </div>
            <div class="form-group">
            <input type="email" id="email" class="form-control" placeholder="Email" required/>
            </div>
            <div class="form-group">
              <input type="text" id="login" class="form-control" placeholder="Login" required/>
            </div>
            <div class="form-group">
              <input type="password" id="password" class="form-control" placeholder="password" required/>
            </div>
            <div class="form-group">
               <input type="file" id="image" class="form-control"  required  />
            </div>
</form>

ajax：

$(document).on('click', "#creer_utilisateur", function() {
    var lastName= $('#lastName').val();
    var firstName = $('#firstName').val();
    var email = $('#email').val();
    var login = $('#login').val();
    var password = $('#password').val();
    var image = $('#image').val();

        success: function(data) {
            $.ajax({
              url: "{{action('UserController@addUser')}}",
              method: 'POST',
              data: {
                lastName: lastName,
                firstName: firstName,
                email: email,
                login: login,
                password: password,
                image: image
              },
              success: function(data) {
              alert('success');

              },
              error: function(){
                alert('failed');
              }
            });
        }
      });
  });

【问题讨论】：

您的数据库现在存储了什么？文件是否写入目录？
@dprogramz ，不，数据库中没有记录它总是向我显示警报（'失败'）
嗯，你能发布你的 User() 类吗？也许问题就在那里

标签： php jquery ajax laravel

【解决方案1】：

您实际上是在保存图像的名称：

$name=$request->file('image')->getClientOriginalName();

...

$user->image = $name;

你说：

“但在给定的数据库级别，它不会将数据与图像一起插入。”

并且列的类型是：

image (text)

所以，我猜你不想存储名称，对吧？

【讨论】：

我要保存图片的网址

【解决方案2】：

当您使用 ajax 上传文件时，您需要创建带有 File 属性的表单。然后附加其他值。

类似这样的：

var formData = new FormData();
if ($('#images')[0].files.length > 0) {
    for (var i = 0; i < $('#images')[0].files.length; i++)
        formData.append('file[]', $('#images')[0].files[i]);
}

formData.append('lastName', $('#lastName').val());

当您使用 ajax 传递文件时，请确保缓存为 false。

$.ajax({
    type: 'POST',
    dataType: "JSON",
    url: jQuery('form').attr('action'),
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        return myXhr;
    },
    cache: false,
    contentType: false,
    processData: false
    data: formData,
    success: function(data) {
        // Success
    },
    error: function(error) {
        // error
    },
});

祝你好运

【讨论】：