Загрузка изображений Laravel 5.3 с использованием ajax
У меня есть проблема здесь. Я разрабатываю свое веб-приложение и хочу, чтобы оно подключалось к моему API через ajax. Я пытаюсь отправить изображение на мой API через AJAX из моей формы на стороне клиента, который является веб-страницей.
Итак, вот моя форма на стороне клиента ..
{{ Form::open(['enctype' => "multipart/form-data", 'id' => 'addplant', 'method' => 'POST', 'files' => true, 'class' => 'col s12']) }}
{{ csrf_field() }}
<div class="row" style="margin-top:10%;">
<div class="col s12 center">
<img class="circle" id="image_url" src=""></a>
{!! Form::file('image_url', array('id' => 'image', 'class' => 'form-control')) !!}
</div>
</div>
<div class="row">
<div class="input-field col s6">
{{ Form::text('herbal_name', null, array('id' => 'herbal_name', 'class' => 'form-control validate')) }}
{{ Form::label('herbal_name', 'Herbal Name') }}
</div>
<div class="input-field col s6">
{{ Form::text('scientific_name', null, array('id' => 'scientific_name', 'class' => 'form-control validate')) }}
{{ Form::label('scientific_name', 'Scientific Name') }}
</div>
</div>
{{ Form::submit('Add plant', array('class' => 'btn btn-primary right add')) }}
{{ Form::close() }}
Вот мой аякс, все еще на стороне клиента
<script type="text/javascript">
$(".add").click(function() {
$.ajax({
url: 'http://127.0.0.1/identificare_api/public/api/plants',
data: new FormData($("#addplant")[0]),
type: "POST",
success: function( msg ) {
console.log(msg);
},
error: function(){
alert('pangit');
}
});
});
</script>
РЕДАКТИРОВАТЬ: и в моем API, у меня просто есть этот
return json_encode($request->file('image_url'));
Что мне здесь не хватает? Я что-то пропустил?
ОБНОВИТЬ: Я пытался применить ответ @bfcior, но когда я пытаюсь console.log(base64img), он вернет эту очень длинную строку, и она будет длиннее, чем вы ожидали.
Решение
Я не совсем уверен, если это проблема, но разве вы не должны использовать кнопку вместо отправки? Я предполагаю, что использование отправки препятствует работе ajax, потому что форма отправляется на сервер для обработки.
РЕДАКТИРОВАТЬ: Что происходит, когда вы нажимаете кнопку отправки? Сообщение нам поможет пользователям stackoverflow диагностировать проблему.
Другие решения
Вы обрабатываете файл с помощью:
$request->file('image_url');
Другой подход — преобразовать img в base64 и передать его в качестве параметра. Затем в вашем контроллере / маршруте вы можете декодировать base64 и сохранить в файл (если это необходимо).
{{ Form::open(['enctype' => "multipart/form-data", 'id' => 'addplant', 'method' => 'POST', 'files' => true, 'class' => 'col s12']) }}
<div class="row" style="margin-top:10%;">
<div class="col s12 center">
<img class="circle" id="image_url" src=""></a>
{!! Form::file('image_url', array('id' => 'image', 'class' => 'form-control')) !!}
</div>
</div>
<div class="row">
<div class="input-field col s6">
{{ Form::text('herbal_name', null, array('id' => 'herbal_name', 'class' => 'form-control validate')) }}
{{ Form::label('herbal_name', 'Herbal Name') }}
</div>
<div class="input-field col s6">
{{ Form::text('scientific_name', null, array('id' => 'scientific_name', 'class' => 'form-control validate')) }}
{{ Form::label('scientific_name', 'Scientific Name') }}
</div>
</div>
{{ Form::submit('Add plant', array('class' => 'btn btn-primary right add')) }}
{{ Form::close() }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
var base64img = null;
$(document).ready(function() {
$('#image').change(function(){
var file = this.files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
base64img = reader.result;
}, false);if (file) {
reader.readAsDataURL(file);
}
});
$(".add").click(function(e) {
e.preventDefault();
$.ajax({
url: 'http://127.0.0.1:8000/identificare_api/public/api/plants',
data: $("#addplant").serialize() + '&image_url=' + base64img,
type: "POST",
success: function( msg ) {
console.log(msg);
},
error: function(){
alert('pangit');
}
});
});
});
</script>
и маршрут
Route::post('identificare_api/public/api/plants', function (Request $request) {
return json_encode($request->all());
});
detector