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 相关文章推荐
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
javascript实现获取字符串hash值
May 10 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
详解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指定函数参数默认值示例代码
2013/12/04 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
python日期相关操作实例小结
2019/06/24 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
中医专业应届生求职信
2013/11/17 职场文书
中英文求职信范文
2014/01/27 职场文书
班主任个人工作反思
2014/04/28 职场文书
保研推荐信
2014/05/09 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
布达拉宫导游词
2015/02/02 职场文书
茶花女读书笔记
2015/06/29 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android