[英]Product upload with Dropzone and Laravel
我想使用 Dropzone 上传包含多个图像的产品,我有一个表单,其中包含其他字段,例如价格、名称等。我看过其他教程,但它们一次只上传图像,而不是其他字段(价格、名称)的图像。 我已经设置了显示预览的 Dropzone,但是如果我提交按钮,我会得到一个验证Please enter product image
。 如何使用 Dropzone 将图像传递给控制器?
控制器
public function store(Request $request)
{
$formInput=$request->except('filename');
$product = product::create(array_merge($formInput, [
'user_id' => Auth::user()->id
]));
foreach ($request->file as $photo) {
$filename = $photo->store('public/photos');
ProductsPhoto::create([
'product_id' => $product->id,
'filename' => $filename
]);
}
}
刀刃
//The form
<div class="panel-body">
<form>
@csrf
<input type="hidden" value="{{csrf_token()}}" id="token"/>
<label for="pro_name">Name</label>
<input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">
<label for="pro_price">Price</label>
<input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">
<label for="photos">Choose 5 Images</label>
<div class="needsclick dropzone" id="document-dropzone"> // Display images preview
</div>
<input type="submit" class="btn btn-primary" value="Submit" id="btn"/>
</div>
阿贾克斯
//This is how I submit the form
<script>
var token = $("#token").val();
$(document).ready(function(){
$("#btn").click(function (e) {
e.preventDefault();
$("#loading").show();
var url = '{{ route('product.store') }}';
var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);
formData.append('_token', token); // adding token
$.ajax({
url: url,
data: formData, //just that without variables
type: 'POST',
cache: false,
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
success:function(data){
if($.isEmptyObject(data.error)){
$("#msg").html("Product has been added successfull");
$("#msg").fadeOut(3000);
window.location.href = "<?php echo url('seller/product') ?>";
$("#loading").hide();
}
else{
printErrorMsg(data.error);
}
}
});
function printErrorMsg (msg) {
$("#loading").hide();
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
});
var uploadedDocumentMap = {}
Dropzone.options.documentDropzone = {
url: '{{ route('product.store') }}',
maxFilesize: 10, // MB
addRemoveLinks: true,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success: function (file, response) {
$('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
uploadedDocumentMap[file.name] = response.name
},
removedfile: function (file) {
file.previewElement.remove()
var name = ''
if (typeof file.file_name !== 'undefined') {
name = file.file_name
} else {
name = uploadedDocumentMap[file.name]
}
$('form').find('input[name="document[]"][value="' + name + '"]').remove()
},
init: function () {
@if(isset($project) && $project->document)
var files =
{!! json_encode($project->document) !!}
for (var i in files) {
var file = files[i]
this.options.addedfile.call(this, file)
file.previewElement.classList.add('dz-complete')
$('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
}
@endif
}
}
</script>
您的代码和概念中有些事情不正确(至少在我看来):
#btn
的默认行为,因为您需要拦截表单提交。 否则,表单将作为GET
请求提交(默认行为是什么)。$("#btn").click(function (e) {
e.preventDefault();
// ...
}
<form>
元素未关闭。 此外,不要覆盖 JavaScript 中的_ token
,而只需将@csrf
添加到表单中。 Larvel 和 jQuery 将为您处理一切。<form>
@csrf
hidden
输入字段,如下所示:success: function (file, response) {
$('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
},
您将在控制器的方法中收到pro_name
、 pro_price
和一个包含上传文件名称的数组document
。 按照您的逻辑,该文件必须已经存在于存储中,因为它是由 Dropzone 操作上传的。 然后,您可以将filename
保存到数据库或其他任何内容,并将其用作以后访问文件的参考。 无论如何,我不建议使用客户端提供的文件名进行存储,因为它可能不是唯一的。 Laravel 为这个场景提供了很多有用的工具: https ://laravel.com/docs/5.7/filesystem#file-uploads
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.