Necesito usar vue-laravel-image-crop-upload en Laravel 8.
Primer paso:
Agregue el archivo de script js en mi proyecto:
https://dai-siki.github.io/vue-image-crop-upload/example/demo-src.jsLuego usa este código en 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> Después de hacer clic en el botón Seleccionar y seleccionar la imagen, Mostrar 419 unknown status .
¿Cómo configurar el token CSRF en ajax?
Debe usar el administrador de paquetes de nodos o npm para instalar el módulo. Use este comando npm install vue-image-crop-upload Visite Docs
Una forma es pasar param
@php $data=['_token'=>csrf_token()]; @endphpy en el componente vuejs
<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>También use el paquete principal Ref: https://github.com/dai-siki/vue-image-crop-upload
Está utilizando el paquete de bifurcación ( https://github.com/ibohonos/vue-laravel-image-crop-upload ) que no está actualizado
También puede enrutar url también como url="{{route("test")}}"
Scripts que usé del paquete original
<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>Si quieres pasar usando encabezados, entonces
@php $data=['X-CSRF-TOKEN'=>csrf_token()]; @endphpentonces en componente
<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>Tratar
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });como se menciona aquí https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token