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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
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
PHP 实现explort() 功能的详解
2013/06/20 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php-msf源码详解
2017/12/25 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python 排列组合之itertools
2013/03/20 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python配置文件处理的方法教程
2019/08/29 Python
Python集合操作方法详解
2020/02/09 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
党员干部承诺书
2014/03/25 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
小区文明倡议书
2014/05/16 职场文书
出租房屋协议书
2014/09/14 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
农业项目合作意向书
2015/05/08 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2019秋季运动会口号
2019/06/25 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书