使用vue构建一个上传图片表单


Posted in Javascript onJuly 04, 2017

这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中;之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程。

1. 转变思维

使用vue编写代码,首先要做的就是转换思维,vue是一个数据驱动的框架,我们只需要操作数据,数据变化后,vue会自动改变DOM结构,而jQuery是直接操作DOM的。比如刚开始写的代码中犯的错误,有一个页面中的input标签是并列多个的,而且name属性的值是自增的,那么我就用v-for循环下,把index填充进去就行了,删除的时候根据index再进行删除。于是代码是这样的:
html:

<div id="app">
 <ul>
 <li v-for="(item, index) in username">
 ${index}. <input type="text" :name="'sb['+index+']'" /> <a href="javascript:;" :index="index" @click="del">delete</a>
 </li>
 </ul>
 <a href="javascript:;" @click="add">add</a>
</div>

js:

var app = new Vue({
 el: '#app',
 delimiters : ['${', '}'],
 data: {
  username : [1, 2, 3] // 只要数组的下标,因此数值无所谓
 },
 methods : {
 // 添加选项
 add : function(){
  this.username.push(1);
 },

 // 删除当前选项
 del : function(e){
  var index = e.target.getAttribute('index'); // 获取所在位置然后删除
  this.username.splice(index, 1);
 }
 }
})

我们先在输入框中输入不同的内容,然后删除中间的某个选项。[demo1]
结果发现,被删除的永远是最后一个。这是为什么呢,我也是删除数组了呀?我是看了官方文档后才明白:用户往输入框内输入的内容只保存在了DOM中,而我们是用vue中的username的下标渲染的出来的DOM元素,我们并没有保存用户输入的内容。当我们删除了其中的某一项时,username发生变化,导致DOM重新渲染,渲染后,最后一项就没有了。
那么怎么修改才能真正的实现删除某一项呢?我们只需要把用户输入的内容保存到username数组中即可:

html:

<div id="app">
 <ul>
 <li v-for="(item, index) in username">
 ${index}. <input type="text" :name="'sb['+index+']'" :value="item" > <a href="javascript:;" :index="index" @click="del">delete</a>
 </li>
 </ul>
 <a href="javascript:;" @click="add">add</a>
</div>

js:

var app = new Vue({
 el: '#app',
 delimiters : ['${', '}'],
 data: {
  username : ['wenzi', 'xxxx', 'yyyy'] // 只要数组的下标,因此数值无所谓
 },
 methods : {
 // 添加选项
 add : function(){
  this.username.push(''); // 新添加的输入框为空
 },

 // 删除当前选项
 del : function(e){
  var index = e.target.getAttribute('index'); // 获取所在位置然后删除
  this.username.splice(index, 1);
 }
 }
})

再来看下效果:[demo2]

2. 上传图片

刚开始时,使用的jQuery的插件fileupload,功能很全,当我为file标签绑定上change事件后,然后再调用该插件进行图片上传,总是会出现意想不到的bug,比如我先对图片格式进行限制,只能上传png格式的图片,可是有时候jpg格式的也能上传上去;png格式的图片,英文名称无法上传,先传个中文名称,然后就可以再上传英文呢名称的了。
后来发现html5下的formData属性,能非常方便的上传图片,而且同时还能上传其他的参数,一小段代码即可搞定:

// 上传图片,绑定change事件
uppic : function(e){
 var file = e.target.files[0]; // 每次只允许上传一张图片,因此只取[0]

 // 判断图片格式
 if( file.type!='image/png' ){ 
  alert('图片格式不正确');
  e.target.files.length = 0;
  $(e.target).val('');
  return false; 
 }

 // 使用formData组装数据
 var formData = new FormData();
 formData.append('pic', $(e.target)[0].files[0]); // 文件数据
 formData.append('flag', '1'); // 其他的一些参数
 $.ajax({// ajax上传
  url: 'xxxxx.php',
  type: 'POST',
  cache: false,
  data: formData,
  processData: false,
  contentType: false
 }).done(function(result) {
  console.log('上传完成');
 });
}

3. 总结

现在也是刚开始学习vue,代码肯定比较烂,最重要的还是转变思维吧!

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

Javascript 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 #Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 #Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 #Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 #Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 #Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 #Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP7内核之Reference详解
2019/03/14 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
js密码强度校验
2015/11/10 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
独特的python循环语句
2016/11/20 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
keras多显卡训练方式
2020/06/10 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
说明书范文
2014/05/07 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
搞笑的获奖感言
2014/08/16 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
instantclient客户端 连接oracle数据库
2022/04/26 Oracle