如何在laravel中安装vue-laravel图像裁剪上传

Question

我需要在laravel 8中使用vue-laravel图像裁剪上传。

第一步：

在我的项目中添加js脚本文件：

https://dai-siki.github.io/vue-image-crop-upload/example/demo-src.js

然后在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>

单击选择按钮并选择图像后，显示419 unknown status。

如何在ajax中设置CSRF令牌？

Answer 1

一种方法是传递参数

@php
$data=['_token'=>csrf_token()];
@endphp

以及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>

也使用核心包参考编号：https://github.com/dai-siki/vue-image-crop-upload

您正在使用fork包(https://github.com/ibohonos/vue-laravel-image-crop-upload)未更新一个

你也可以像url="{{route("test")}}"一样路由url

我从原始包中使用的脚本

<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>

如果你想通过使用标题，然后

@php
$data=['X-CSRF-TOKEN'=>csrf_token()];
@endphp

然后在组件中

<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>

Answer 2

您必须使用节点包管理器或npm来安装模块使用该命令npm install vue-image-crop-upload就诊单据

Answer 3

尝试

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

如本文所述https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token