Verwenden Sie Ajax, um eine Reihe von Formularen zu senden, die ein Bild enthalten.
Beim Senden ohne Ajax kann es erfolgreich in der Datenbank gespeichert werden.
Da das Bild jedoch vor dem Hochladen komprimiert werden muss, wird es in Ajax-Übermittlung geändert . Die Ajax-Anfrage wurde erfolgreich gesendet, kann jedoch nicht in der Datenbank gespeichert werden.
Ich denke, dass der Code im Controller geändert werden muss, aber ich weiß nicht, wie.
ps: Das Plugin localResizeIMG wird zum Komprimieren von Bildern verwendet. https://github.com/think2011/localResizeIMG
Das Folgende ist die Ansicht zum Senden des Formulars mit Ajax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<p class="container">
<fieldset class="form-group">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="content">内容</label>
<textarea class="form-control" id="content" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="photo">图片</label>
<input type="file" name="file" accept="image/*" class="form-control-file" id="photo">
<img id="preview"/>
</fieldset>
<a id="submit" class="btn btn-primary">提交</a>
</p>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"
integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
crossorigin="anonymous"></script>
//用了localResizeIMG插件，用于上传图片前先压缩。https://github.com/think2011/localResizeIMG
<script src="js/dist/lrz.all.bundle.js"></script>
<script>
$(function () {
var $preview = $('#preview');
var formData = null;
$('#photo').on('change', function () {
lrz(this.files[0], {
width: 800
}).then(function (rst) {
$preview.attr('src', rst.base64);
rst.formData.append('fileLen', rst.fileLen);
});
});
$("#submit").click(function (rst) {
$.ajax({
type: "POST",
url: "article/",
dataType: 'json',
cache: false,
data: {
title: $("#title").val(),
content: $("#content").val(),
photo: rst.formData
}
}).done(function (msg) {
alert("done: " + msg);
}).fail(function (jqXHR, textStatus) {
alert("fail: " + textStatus);
});
});
});
</script>
</body>
</html>
Das Folgende ist der ursprüngliche Controller, als Ajax nicht verwendet wurde. Er kann jetzt erfolgreich in der Datenbank gespeichert werden.
public function store(Requests\StoreArticleRequest $request)
{
$article = new Article($request->except('photo'));
$article -> user_id = \Auth::id();
$file = $request->file('photo');
$destinationPath = 'uploads/';
$extension = $file->getClientOriginalExtension();
$fileName = \Auth::user()->id . '_' . time() . '.' . $extension;
$file->move($destinationPath, $fileName);
$article -> photo = '/'.$destinationPath.$fileName;
$article->save();
return redirect()->action('ArticleController@show', ['id' => $article->id]);
}Das Folgende ist StoreArticleRequest
public function rules()
{
return [
'title'=>'required',
'content'=>'required',
'photo'=>'image'
];
}
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
save前你先dd下$article数据看看csrf，ajax提交的时候不要忘。