elementUi upload 使用小结

在最近的项目里，使用了elementUI去。其中碰到了许许多多的小问题。碰到有意思的，稍微记录一下。

项目前端基本使用Vue，后端则是传统的spring接口。

upload组件

由于封装的完整，导致使用中碰到许许多多的问题。
先贴代码：
前端html：

image.png

js：

image.png

问题一、如何让后台接口接收？

:action="uploadUrl"这里是我的后台的接口路径。
:headers="headers"将token放在headers中成功

image.png

这是我的后台接收处理

image.png

在解决问题的过程中，找了很多答案，还有一种解决方法是设置无效action，在回调中处理上传请求。也可以实现效果，但是会存在上传有两次请求，第一次请求在console中报404错误。

问题二、在:before-upload="beforeAVatarUpload"返回false时，仍会触发:before-remove

本来百思不得其解，上传回调一般是对上传文件做一个校验，校验失败，不是都不会去做上传，怎么还要去删除呢？
后来在官网仔细看看之后，我觉得可能也许是我写错了？？？

image.png image.png

棒，没看懂。

解决办法：
一、在handleRemove中做判断。