[ant-design-vue]-upload组件上传405问题

环境

使用的是包的版本是：

"vue": "^2.6.11"
"ant-design-vue": "^1.6.5"

问题描述

在使用ant-design-vue的组件upload的时候，出现了405的报错

问题解析

在该组件中使用了post方式上传文件，使用了upload组件

注意，文件上传不可以使用其它方式，只能使用POST

//UI：
<a-upload accept=".xls,.xlsx" :showUploadList="false" :before-upload="beforeUpload">
    <a-input type="text" placeholder="Please select upload file" style="width:370px;" v-model="uploadData.file.name" read-only>
        <a-icon slot="addonAfter" type="upload"/>
    </a-input>
</a-upload>

<script>
//逻辑
let formFile = new FormData();
let uploadFile=this.uploadData.file;
formFile.append('file', uploadFile);//文件

axios({
    method: 'post',
    url: '/upload',
    async: false,
    timeout: 60000,
    headers:{
        "Content-Type":"multipart/form-data", //文件上传时的格式
    },
    cache: false,//上传文件无需缓存
       processData: false,//用于对data参数进行序列化处理 这里必须false
    contentType: false, //必须
       data: formFile
}).then(res => {
    /*上传成功*/
}).catch((err) => {
  /*上传失败*/
})
</script>

http-405

对于405是不允许访问，网上的大部分情况是说该错误伴随着POST的方法出现，一般是通过post方法获取静态文件的时候，会出现该错误，修改为get方法就可以了
但是该报错不是这种情况

问题分析

• 首先，该方法是用于上传文件不能修改为get方式，只能使用post方法
• 其次，是报错发生于选择文件的时候，此时不应发出请求，应该是点击upload时上传文件

说明组件是在选择文件后就触发了上传操作，而需求是手动触发，因此查看upload组件的api,可以通过beforeUpload钩子函数始终返回false,禁止自动上传操作

修改后发现问题解决！！