vue中用H5实现文件上传的方法实例代码


Posted in Javascript onMay 27, 2017

整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享。

1.图片上传

<img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;">
 <img v-else src="../../assets/default.png" style="height:126px;max-width:133px;margin: 25px 0;">
<form id="form1" enctype="multipart/form-data" method="post" action="">
        <div style="height:0px; overflow:hidden; position:absolute;">
         <input type="file" tabIndex="-1" accept="image/jpeg,image/x-png,image/gif" name="file" style="padding-left:10px" id="fileToUpload" @change="fileSelected()"/>
        </div>
        <button type="button" class="btn btn-default btn-xs" onclick="document.getElementById('fileToUpload').click()">上传</button>
        <button type="button" class="btn btn-default btn-xs" @click="deleteImg">删除</button>
       </form>
// 上传图片
  'fileSelected': function () {
   var that = this
   let files = document.getElementById('fileToUpload').files
   if (files && files.length) {
    var fd = new FormData()
    fd.append('file', files[0])
    var reader = new window.FileReader()
    // 图片大小 100KB
    var fileSize = 100 * 1024
    reader.readAsDataURL(files[0])
    reader.onload = function (e) {
     if (e.target.result.length > fileSize) {
      that.$dispatch('show-alert', 'msg_1016')
      document.getElementById('fileToUpload').value = ''
     } else {
      var xhr = new XMLHttpRequest()
      xhr.addEventListener('load', that.uploadComplete, false)
      xhr.open('POST', that.$root.appBaseUrl + 'fileUpload/singleFileUpload')
      xhr.send(fd)
     }
    }
   }
  },
  // 上传成功
  'uploadComplete': function (evt) {
   this.personInfo.photoUrl = (evt.target.responseText).replace('\\', '/')
   document.getElementById('fileToUpload').value = ''
  },
  // 删除图片
  'deleteImg': function () {
   this.personInfo.photoUrl = ''
  },
computed: {
  headPreFix: function () {
   let params = window.localdicts.dicts.ph_params.systemParam
   if (params.storageType === 1) {
    return params.storageUrl
   }
   return this.$root.appBaseUrl
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
jquery 插件学习(五)
Aug 06 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
详解vue2.0脚手架的webpack 配置文件分析
May 27 #Javascript
详解如何使用webpack打包Vue工程
May 27 #Javascript
Jquery中attr与prop的区别详解
May 27 #jQuery
angular使用post、get向后台传参的问题实例
May 27 #Javascript
AngularJS中使用ngModal模态框实例
May 27 #Javascript
angularJS模态框$modal实例代码
May 27 #Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 #Javascript
You might like
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php中文验证码实现方法
2015/06/18 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
一些Unix笔试题和面试题
2012/09/25 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
产品委托授权书范本
2014/09/16 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
525心理健康活动总结
2015/05/08 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby