使用ajax上传laravel图像

Question

我的代码中有一个问题。当我点击更新按钮时，它不会在后台上传图像，在控制台中传递成功消息，但图像值返回null。有人能解决这个问题吗。如果你能这样做，我将不胜感激。这里我已经粘贴了我的刀片代码与脚本plz检查这个

<div class="row">
@foreach($client as $clie)
<div class="col-4">
<div class="form-group">
<label for="clientimage">Logo #{{$loop->index+1}}</label>
<input type="file" class="form-control-file" name="image" id="clientimage{{$clie->id}}">
<small id="emailHelp" class="form-text text-muted">JPEG, PNG only</small>
</div>
<button type="submit" class="btn btn-primary float-right" onclick="updateImage({{$clie->id}})">update</button>
</div>
@endforeach
</div>

这是我的脚本代码

<script>
function updateImage(id){
var image = $('#clientimage' + id).val();
// var subtext =  $('#subtext').val();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'PUT',
dataType: 'json',
data: {image:image},
url: `/cms/companyClient/${id}`,
success: function( _response ){
console.log(_response);
console.log("file uploaded");
},
error: function( _response ){
console.log(_response);
}
});
}
</script>

Answer 1

try it my code 
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => { 
$('#image_preview_container').attr('src', e.target.result); 
}
reader.readAsDataURL(this.files[0]); 
});
$('#upload_image_form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('your ulr')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Image has been uploaded successfully');
},
error: function(data){
console.log(data);
}
});
});
});
</script>