I need use vue-laravel-image-crop-upload in Laravel 8.
First step:
Add js script file in my project:
https://dai-siki.github.io/vue-image-crop-upload/example/demo-src.js
Then use this code in html:
<div id="app">
<div class="item">
<img v-if="avatarUrl2" v-show="true" class="avatar" :src="avatarUrl2" style="" />
<my-upload
key="0"
url="/club/uploadCover"
field="avatar2"
lang-type="ar"
:value.sync="show2"
:params="otherParams"
></my-upload>
</div>
<button class="release__buy btn-cover" @click="toggleShow2">Select</button>
</div>
After click select button and select image, Show 419 unknown status.
How to set CSRF token in ajax?
You have to use node package manager or npm to install module
use this command npm install vue-image-crop-upload
Visit Docs
One way is to pass param
@php
$data=['_token'=>csrf_token()];
@endphp
and in vuejs component
<my-upload url="{{route("test")}}" img-format="jpg" img-bgc="#fff"
:lang-ext="{hint: '点击，或拖动图片至此处(*^_^*)'}"
v-model="show1"
field="avatar1"
ki="0"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:no-rotate="false"
:params="{{json_encode($data)}}"></my-upload>
Also use core package Ref:https://github.com/dai-siki/vue-image-crop-upload
You are using fork package(https://github.com/ibohonos/vue-laravel-image-crop-upload) which is not updated one
Also you can route url too like url="{{route("test")}}"
Scripts i used from original package
<script src="https://dai-siki.github.io/vue-image-crop-upload/example-2/vue.js"></script>
<script src="https://dai-siki.github.io/vue-image-crop-upload/example-2/demo-src.js"></script>
If you want to pass using headers then
@php
$data=['X-CSRF-TOKEN'=>csrf_token()];
@endphp
then in component
<div class="item">
<a class="btn" @click="toggleShow2">Set Avatar</a>
<img class="avatar" v-if="avatarUrl2" :src="avatarUrl2" v-show="true" style="display: none;">
<my-upload url="{{route("test")}}"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:no-square="true"
field="avatar2"
ki="0"
lang-type="en"
v-model="show2"
:headers="{{json_encode($data)}}"
></my-upload>
</div>
Try
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
as referenced here https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token