V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

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

  •  
  •   Newyorkcity · 2020-02-11 14:12:24 +08:00 · 1264 次点击
    这是一个创建于 1748 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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(); 就不会有问题!

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

    9 条回复    2020-02-11 15:18:46 +08:00
    rain0002009
        1
    rain0002009  
       2020-02-11 14:30:48 +08:00
    form 里面的 button 如果没有注明是 type 是 button 就有可能被当作 submit
    你可以写个例子试试
    wunonglin
        2
    wunonglin  
       2020-02-11 14:33:46 +08:00
    你都用 FormData 了还用 from 标签干嘛?
    redam
        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
    Newyorkcity
        4
    Newyorkcity  
    OP
       2020-02-11 14:38:10 +08:00
    @rain0002009
    @wunonglin
    我根本没用 Form 元素啊..
    Newyorkcity
        5
    Newyorkcity  
    OP
       2020-02-11 14:38:43 +08:00
    @redam 谢谢帮忙找资料..可是我根本没有任何 form 元素出现 el-form 也没有...
    serge001
        6
    serge001  
       2020-02-11 14:51:28 +08:00
    检查下服务器的响应的 content-type 是啥
    wunonglin
        7
    wunonglin  
       2020-02-11 14:55:47 +08:00
    试着不用 el,原生写一个
    rain0002009
        8
    rain0002009  
       2020-02-11 14:59:57 +08:00
    反正你都用了 element 了 为啥不用它的 upload 呢
    Newyorkcity
        9
    Newyorkcity  
    OP
       2020-02-11 15:18:46 +08:00
    @rain0002009 因为一开始用的就是 upload..我一开始还怀疑是 el 的问题...所以直接用原生的了
    @serge001 服务器响应的?response 里的?服务器要求的网页刷新?
    @wunonglin 文件上传已经原生到极点了..你是说 button 原生写一个?我试试....
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2879 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:05 · PVG 20:05 · LAX 04:05 · JFK 07:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.