iview 上传文件问题

Question

上传文件遇到问题,设置:with-credentials="true" 无效,查看提交的url中header没有带入cookie的数据,导致提交报错

<style lang="less">
    @import '../../../styles/common.less';
    @import '../../css/upload.less';
    @import '../../css/work-flow.less';
</style>

<template>
    <Row>
        <Card>
            <a href='static/template.csv' target=_blank>
            <p slot="title">
                <Icon type="ios-download-outline"></Icon>
                点击这里下载模板文件
            </p>
            </a>
            <Upload
                    type="drag"
                    :action="url"
                    :headers="{'Content-Type': 'multipart/form-data'}"
                    :with-credentials="true"
                    :format="['csv']"
                    :data="data"
                    :on-format-error="handleFormatError"
                    :before-upload="handleBeforeUpload"
                    :on-progress="handleProgress"
                    :on-success="handleSuccess"
                    :on-error="handleError"
            >
                <div style="padding: 60px 0;height: 200px;">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或将文件拖拽到这里上传</p>
                </div>
            </Upload>
        </Card>
    </Row>
</template>

<script>
  import msgutil from '@/utils/message'
  import Api from '@/api'
  import Axios from 'axios'
  import Cookies from 'js-cookie'

  export default {
    name: 'file-upload',
    data () {
      return {
        uploadList: [],
        url:'',
        data:{},
      };
    },
    methods: {
      getData(){
        this.url = Api.uploadRecipeLocation
        this.data={WEBID:Cookies.get("WEBID")}
      },
      handleFormatError (file) {
        msgutil.nWarning(this,'文件格式不正确','文件 ' + file.name + ' 格式不正确，请使用模板文件。')
      },
      handleBeforeUpload (file) {
        msgutil.nWarning(this,'文件准备上传','文件 ' + file.name + ' 准备上传。')

      },
      handleProgress (event, file) {
        msgutil.nInfo(this,'文件正在上传','文件 ' + file.name + ' 正在上传。')
        // 上传文件处理 原提交方式存在问题
//        let fd = new FormData()
//        fd.append('file', file)
//        Axios.post(this.url,fd).then((res) => {
//          console.log(res)
//        }, (res) => {
//          console.log(res)
//        });
//        return false;
      },
      handleSuccess (evnet, file) {        console.log(file)
        console.log(event);

        this.$Notice.success({
          title: '文件上传成功',
          desc: '文件 ' + file.name + ' 上传成功。'
        });
      },
      handleError (event, file) {
        console.log(file)
        this.$Notice.error({
          title: '文件上传成功',
          desc: '文件 ' + file.name + ' 上传失败。'
        });
      },
      handleView (name) {
      },
      handleRemove (file) {
        // 从 upload 实例删除数据
      },
    },
    mounted () {
    },
    created () {
      this.getData()
    }
  }
</script>

Answer 1

1.你上传的url是.json格式的吗？
2.不是因为没带上cookie，是因为你的options请求被重定向了，确认下你上传的路径对不对