vue中实现图片和文件上传的示例代码
2018-03-16 09:49
1176 查看
<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中实现图片和文件上传的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- java实现文件上传下载和图片压缩代码示例
- Struts2+Jquery.uploadify实现的文件上传特效示例代码
- PHP 图片文件上传实现代码
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- php实现图片上传与文件上传的实现代码实例
- [导入]Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载).NET技术
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- 用TreeView控件实现资源管理器(显示本地硬盘下所有文件夹和文件,并可以浏览图片)(示例代码下载)
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- html5实现多文件的上传示例代码
- ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
- Servlet+Jsp实现图片或文件的上传功能具体思路及代码
- Servlet+Jsp实现图片或文件的上传功能具体思路及代码
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)