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 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 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水印
2007/03/16 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
常用js字符串判断方法整理
2013/10/18 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python缩进区别分析
2014/02/15 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
语文教学随笔感言
2014/02/18 职场文书
幼师中班个人总结
2015/02/12 职场文书
档案工作个人总结
2015/03/03 职场文书
实习单位鉴定意见
2015/06/04 职场文书
跳高加油稿
2015/07/21 职场文书
2015双创工作总结
2015/07/24 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Python图片检索之以图搜图
2021/05/31 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript