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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
javascript new一个对象的实质
Jan 07 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
javascript相关事件的几个概念
May 21 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php实现图片缩放功能类
2013/12/18 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python numpy中cumsum的用法详解
2019/10/17 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
房屋出售协议书
2014/04/10 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Kubernetes控制节点的部署
2022/04/01 Servers
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA