最近在学习vue 2，实现element-ui 框架中upload 上传文件组件碰到的一些坑：
1.上传文件成功后on-success 声明的方法不执行。
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
官方模板是上面代码，但是我是实现自定义上传文件，禁用了action实现方式，添加
:auto-upload=“false” ，然后实现**:http-request=“submitUpload”**，具体的调用上传文件接口在submitUpload方法中实现，但是这种方式调用成功后on-success 方法就不执行，改用官方默认的方式就能正常执行on-success 块中的代码
最后结论：应该是禁用了action 调用接口，实现自定义的http-request 实现，以至于on-success 在接口成功之后没有触发，这是自己试验后的结论，自己百度找不到具体的原因，也不知道是否准确。
下面是on-success方法不触发代码：
<el-upload class="" ref="upload" action=""
name="file" :on-preview="handlePreview" :file-list="fileList"
:on-success="uploadSuccess" :auto-upload="false"
:on-change="uploadChange" :http-request="submitUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
uploadSuccess(response, file, fileList) {
console.log(response );
},
submitUpload(){ //执行上传图片
this.axios({
method: 'post',
url: 'http://localhost:8090/uploadFile',
data: this.fileData,
timeout: 4000
// withCredentials: true
}).then((response) => {
//如果一定要实现on-success声明的方法只能这里显示的调用uploadSuccess方法
this.uploadSuccess(response);
})
},
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
