vue 使用 FormData 上传文件后必然引起页面刷新 有一样情况的朋友么（没做特殊处理但也完全不会的告诉我一声也很有帮助的！）
Newyorkcity · 2020-02-11 14:12:24 +08:00 · 1181 次点击这是一个创建于 1541 天前的主题，其中的信息可能已经有所发展或是发生改变。
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(); 就不会有问题！
真是奇了怪了，日了狗了。。。
 |
1
rain0002009 2020-02-11 14:30:48 +08:00
form 里面的 button 如果没有注明是 type 是 button 就有可能被当作 submit
你可以写个例子试试 |
 |
2
wunonglin 2020-02-11 14:33:46 +08:00
你都用 FormData 了还用 from 标签干嘛？
|
 |
3
redam 2020-02-11 14:34:16 +08:00
可能跟这个有关：
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 |
 |
4
Newyorkcity OP |
|
5
Newyorkcity OP @redam 谢谢帮忙找资料..可是我根本没有任何 form 元素出现 el-form 也没有...
|
 |
6
serge001 2020-02-11 14:51:28 +08:00
检查下服务器的响应的 content-type 是啥
|
|
7
wunonglin 2020-02-11 14:55:47 +08:00
试着不用 el，原生写一个
|
|
8
rain0002009 2020-02-11 14:59:57 +08:00
反正你都用了 element 了 为啥不用它的 upload 呢
|
|
9
Newyorkcity OP @rain0002009 因为一开始用的就是 upload..我一开始还怀疑是 el 的问题...所以直接用原生的了
@serge001 服务器响应的?response 里的?服务器要求的网页刷新? @wunonglin 文件上传已经原生到极点了..你是说 button 原生写一个?我试试.... |
Select Language