Laravel 419错误>元素UI文件上传Vue Js组件

Question

我正在 Laravel 中使用Element UI的 Vue Js 文件上传组件。该组件具有一个带请求网址的action属性。

浏览并选择文件后，我收到 419（未知状态）错误，我认为这与令牌认证有关。

我的问题是如何在此元素UI组件

中实现此 csrf令牌认证

这是我的代码：

<template>
  <el-container>
    <side-nav></side-nav>
    <el-main>
      <el-upload
        id="file"
        name="file"
        ref="file"
        class="upload-demo"
        drag
        action="http://request/url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
        <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
      </el-upload>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [],
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

这是错误：

感谢您提供的任何反馈意见！

Answer 1

在上载组件上，action属性应指向处理请求的网址。

action="http://request/url"

确保已实现它，并具有正确的路由作为此属性的值

Answer 2

您应将csrf令牌数据添加到 headers 属性；

https://element.eleme.io/#/en-US/component/upload#attributes

组件；

<el-upload :headers="{ 'X-CSRF-TOKEN': csrf }"></el-upload>

<script>
    export default {
        props: ['csrf']
    }
</script>

刀片；

<your-component csrf="{{ csrf_token() }}"></your-component>

我希望这会对您有所帮助！