鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ iview 上傳文件問題

iview 上傳文件問題

上傳文件遇到問題,設(shè)置:with-credentials="true" 無效,查看提交的url中header沒有帶入cookie的數(shù)據(jù),導(dǎo)致提交報錯

<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>點擊或?qū)⑽募献У竭@里上傳</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,'文件準(zhǔn)備上傳','文件 ' + file.name + ' 準(zhǔn)備上傳。')

      },
      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 實例刪除數(shù)據(jù)
      },
    },
    mounted () {
    },
    created () {
      this.getData()
    }
  }
</script>

clipboard.png

clipboard.png

clipboard.png

回答
編輯回答
別瞎鬧

1.你上傳的url是.json格式的嗎?
2.不是因為沒帶上cookie,是因為你的options請求被重定向了,確認(rèn)下你上傳的路徑對不對

2017年3月1日 02:05