Gunakan ajax untuk menghantar satu set borang, yang mengandungi imej
Pada asalnya, apabila menghantar tanpa ajax, ia boleh disimpan dengan jayanya ke pangkalan data
Tetapi kerana imej itu perlu dimampatkan sebelum memuat naik, ia ditukar kepada penyerahan ajax. . Permintaan ajax berjaya dihantar, tetapi ia tidak boleh disimpan ke Pangkalan Data,
Saya rasa mungkin kod dalam pengawal perlu diubah suai, tetapi saya tidak tahu caranya.
ps: Pemalam localResizeIMG digunakan untuk memampatkan imej. https://github.com/think2011/localResizeIMG
Berikut ialah pandangan menghantar borang menggunakan 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>
Berikut ialah pengawal asal apabila ajax tidak digunakan. Ia boleh disimpan ke pangkalan data Sekarang saya tidak tahu bagaimana untuk menukarnya.
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]);
}Berikut ialah StoreArticleRequest
public function rules()
{
return [
'title'=>'required',
'content'=>'required',
'photo'=>'image'
];
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
save前你先dd下$articleTengok dataJangan lupa csrf dan ajax semasa menghantar.