使用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 问答知识整理
Feb 11 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php模板引擎技术简单实现
2016/03/15 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
python实现识别相似图片小结
2016/02/22 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python操作Jira库常用方法解析
2020/04/10 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
公司年底活动方案
2014/08/17 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
党员个人整改措施
2014/10/24 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
签约仪式致辞
2015/07/30 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
八年级历史教学反思
2016/02/19 职场文书