vuvivian's blog

越努力，越幸运.

日常小结/借助form表单提交实现文件上传

vuvivian's Avatar 2020-04-15

分享本文
  1. 1. 需求
  2. 2. 实现功能预览
  3. 3. form表单提交文件主要代码及问题总结
  4. 4. 具体实现请移步： https://github.com/vuvivian/vue-node-mongo/tree/master/client-app/src/components/global/v-form-upload

需求

* 提供上传文件的按钮
* 文件上传成功后展示该文件缩略图
* 鼠标放在缩略图上时显示预览和删除按钮
* 实现文件预览和删除功能

实现功能预览



form表单提交文件主要代码及问题总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form ref="upload-form" method="POST" target="v_iframe" action="/menu/upload_menu_icon" enctype="multipart/form-data" >
     <input
       ref="input"
       type="file"
       id="upload"
       name="ufile"
       class="upload-file"
       accept="audio/*,video/*,image/*"
       @change="handleChange"
     />
     <label v-show="this.fileList.length <= 0" for="upload" class='add-file'>
       <Icon type="ios-camera" size="40" class="add-file-icon"/>
       <span class="add-file-text">应用图标</span>
     </label>
   </form>

为了解决执行form的submit之后不要跳转页面也不要刷新页面，需要在form下添加 iframe,并将form的target指向该iframe

1
<iframe id="id_iframe" name="v_iframe" style="display:none" />

enctype必须指定，且须为multipart/form-data
action指定文件上传的地址

具体实现请移步： https://github.com/vuvivian/vue-node-mongo/tree/master/client-app/src/components/global/v-form-upload

本文最后更新于 天前，文中所描述的信息可能已发生改变

本文发表于