如何在laravel中安装vue-laravel-image-crop-upload？

Question

我需要在 Laravel 8 中使用vue-laravel-image-crop-upload。

第一步：

将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未知状态。

如何在ajax中设置CSRF令牌？

- mySun

Answer 1

一种方法是传递参数

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

在Vue.js组件中

  <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：url="{{route("test")}}" 我使用了原始包中的脚本。

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

- John Lobo

Answer 2

您需要使用节点包管理器或npm来安装模块，使用以下命令：npm install vue-image-crop-upload访问文档

- amir ali

---

嗨，我不想使用npm安装。只想知道如何在ajax中设置CSRF令牌？ - mySun

请使用headers属性并传递对象{'X-CSRF-TOKEN': csrf_token()}，希望这样可以工作。 - amir ali

Answer 3

尝试

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

如此引用 https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token

- Cameron