解决vue2.0元素-用户界面中埃尔-上传的上传前方法返回错误的时提交()不生效问题

我要实现的功能是在上传文件之前校验是否表格中存在重复的数据，有的话，需要弹窗提示是否覆盖，确认之后继续上传，取消之后，就不再上传。

项目中用的元素用户界面是V1.4.3

el-upload class='上传-演示'拖动ref='文件上传' : action=' URL。文件上传' : on-success=' handleupload success ' : on-error=' handleUploadError ' : on-progress upload ' : before-upload=' before upload ' show-file-list多个' El-icon-上传'/I div=' El-上传_ _ text '点击上传，或者拖拽到这里/div/El-上传

代码中我是将上传前方法返回假的，然后点击确认之后，调_这个参考文献。文件上传。submit()；但是在点击确定之后，文件还是没有上传，后面去看了元素用户界面源码，发现上传前方法如果返回假的，提交()方法是会被拦截的。还有第二个问题，就是取消时_这个参考文献。文件上传。清除文件()；我调的clearFiles()方法，这个方法会把文件列表全部清空，我只想删除我当时取消的那个文件。后面将这两句换成了如下两句：

继续上传：_这个$refs.fileUpload.$children[0].帖子(文件);

取消时在文件列表中删除该文件：_这个$refs.fileUpload.handleRemove(文件);

补充：VUE2.0元素上传使用

template div class=' up temp ' El-upload class=' upload-demo ' ref=' upload ' multiple=' false ' action='/web/API/upload file ' : on-preview=' handlePreview ' : on-remove=' handleRemove ' : on-change=' handleChange ' : before-upload=' before ' 3: file-list=' fileList ' 333: auto-upload=' false ' 3333: multiple='选取文件/El-button El-button style=' margin-left : 10px；size=' small ' type=' success ' @ click=' submit upload '导入/El-button div slot=' tip ' class=' El-upload _ _ tip '只能上传jpg/png文件/div/El-上传/div/模板脚本导出默认值{ data(){ return { file list :[]} }，mounted: function () { //加载完页面执行的函数}，方法： { SubmItupload(){ this .参考文献。上传。submit()；}，handleRemove(文件，文件列表){ console.log(文件，文件列表);}，handlePreview(文件){ console.log(文件);}，handleChange(文件，文件列表){ console.log(文件);console.log(文件列表);}，beforeUpload:函数（文件){ console.log(文件)//这里是重点，将文件转化为上传数据上传让FD=新表单数据(FD)。追加('文件'，文件)这个$ http。post('/web/API/uploadFile '，fd).然后((res)={ console.log(res) }，(res)={ console。log(RES)})；返回false} }，组件3360 {//组件} }/scriptstyle作用域/stylestyle .uptemp .El-upload-list {位置：绝对；left : 140 pxtop : 0；宽度： 50%;} .uptemp { position:相对；} .uptemp .上传列表El-upload-list _ _ item { margin-top : 0；}/样式总结

以上所述是小编给大家介绍的解决vue2.0元素-用户界面中埃尔-上传的上传前方法返回错误的时提交()不生效问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！