vue 使用 FormData 上传文件后必然引起页面刷新 有一样情况的朋友么（没做特殊处理但也完全不会的告诉我一声也很有帮助的！）

[Newyorkcity]

axios 和 fetch 都发生一样的问题

根本就没有 form 元素，是我用按钮的 click 事件处理函数，手动

var formData = new FormData();
formData.append("avatar", document.getElementById("avatar-uploader").files[0]);

这样搞出来的 FormData 对象，然后在调用 axios 和 fetch 时作为 data 给进去。

甚至为了避免这个按钮莫名其妙变成了 type=submit （它是 el-button type="primary“ 其实根本就没有变 submit 的可能），我还 @click.prevent 了。

你看我这里被迫用 document.getElementById(..) 是因为我想，会不会是提交之后导致文件对象发生改变，而 文件对象绑定到当前组件的 data 属性 上，所以引发页面重新渲染。（但我确定是刷新了，因为控制台之前输出的信息没了）。所以才用看着这么落伍的赋值方法。。

如果没有文件对象，只是单纯的使用 new FormData(); 就不会有问题！

真是奇了怪了，日了狗了。。。

[rain0002009]

form 里面的 button 如果没有注明是 type 是 button 就有可能被当作 submit
你可以写个例子试试

[wunonglin]

你都用 FormData 了还用 from 标签干嘛？

[redam]

可能跟这个有关：



W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

---element-ui

[Newyorkcity]

@rain0002009
@wunonglin
我根本没用 Form 元素啊..

[Newyorkcity]

@redam 谢谢帮忙找资料..可是我根本没有任何 form 元素出现 el-form 也没有...

[serge001]

检查下服务器的响应的 content-type 是啥

[wunonglin]

试着不用 el，原生写一个

[rain0002009]

反正你都用了 element 了 为啥不用它的 upload 呢

[Newyorkcity]

@rain0002009 因为一开始用的就是 upload..我一开始还怀疑是 el 的问题...所以直接用原生的了
@serge001 服务器响应的?response 里的?服务器要求的网页刷新?
@wunonglin 文件上传已经原生到极点了..你是说 button 原生写一个?我试试....