vue中实现图片和文件上传的示例代码


Posted in Javascript onMarch 16, 2018

html页面

<input type="file" value="" id="file" @change='onUpload'>//注意不能带括号

js代码

methods: {
//上传图片
onUpload(e){
      var formData = new FormData(); 
    f ormData.append('file', e.target.files[0]);
    formData.append('type', 'test');
      $.ajax({
        url: '/ShopApi/util/upload.weixun',//这里是后台接口需要换掉
        type: 'POST',
        dataType: 'json',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success: (res) => {        
          if (res.code === 200) {
            var img_tpl ='<div class="picture" style="width:108px;float:left;"><img id="preview" src="'+后台返回的tu'pian路径+'" style="width:48px;height:48px;float:left;background-size:cover;"/><span class="r-span"
 onclick = "onDeletePicture()" style="color:#49BDCC;display:block;float:left;margin-left:10px;line-height:48px;">删除</span></div>';
            $("#refund_img").after(img_tpl);
          }
        },
        error: function(err) {
        alert("网络错误");
        }
      });
} 
}

图片效果图

vue中实现图片和文件上传的示例代码

以上这篇vue中实现图片和文件上传的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
js实现3D照片墙效果
Oct 28 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 #Javascript
Vue实现active点击切换方法
Mar 16 #Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 #Javascript
vue实现tab切换外加样式切换方法
Mar 16 #Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 #Javascript
node.js博客项目开发手记
Mar 16 #Javascript
vue iView 上传组件之手动上传功能
Mar 16 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
各种快递查询--Api接口
2016/04/26 PHP
调试php程序的简单步骤
2019/10/04 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
最短的IE判断代码
2011/03/13 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
js 颜色选择插件
2017/01/23 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
简单介绍Python中的RSS处理
2015/04/13 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
节能环保口号
2014/06/12 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
销售经理岗位职责
2015/01/31 职场文书
小学教师年度个人总结
2015/02/05 职场文书
通知范文怎么写
2015/04/16 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android