vue 使用input file点击上传本地图片

<input type="file" @change="upData($event)" ref="InputFile" name="files" />
upData(event) {
            var reader = new FileReader();
            let fileData = this.$refs.InputFile.files[0];
            reader.readAsDataURL(fileData);
            let _this=this;
            reader.onload = function(e) {
                console.log(e)
                               // data定义字段
                _this.addimg=e.srcElement.result;
            };
        },

原文地址:https://www.cnblogs.com/chenchenhao/p/10387388.html

时间: 2024-10-23 17:55:54

vue 使用input file点击上传本地图片的相关文章

input file 美化及上传本地预览

效果: /*input file 美化及上传本地预览,兼容IE6-8,FIrefox, Chrome(需在服务端,本地无效)*/<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>input file 美化</title>    &

IE input file隐藏不能上传文件解决方法

当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" />标签,但是默认的file标签很难看,而且每个浏览器下都有很大差距. 1.一般解决办法: 我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口,选择文件之后,触发file的change事件提交.

html input file标签的上传文件 注意点

文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保证数据的准确采 集,必须定义一个独一无二的名称: size属性定义文件上传框的宽度,单位是单个字符宽度: maxlength属性定义最多输入的字符数. 注意: 要使得文件上载能

KindEditor上传本地图片在ASP.NET MVC的配置

http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. 开发工具:VS 2010 EN 开发语言:Visual C# ASP.NET MVC 2.0 kindeditor-3.5-zh_CN 下载 文中以Blog文章为例,为做演示,数据表比较简单,如下图: 添加 BlogController Code: 1 2 3 4 5 6 7 8 9 10 11 1

.net mvc 利用 kindeditor 上传本地图片

最近在用kindeditor 编辑器,在上传本地图片的时候遇到了点问题,不能正确的上传. 现在把使用 kindeditor 上传本地图片的配置记录一下. 1.下载kindeditor.http://kindeditor.net/down.php 2.解压,将所有文件复制到项目里.我是放在content里面. (您可以根据需求删除以下目录后上传到服务器,asp - ASP程序,asp.net - ASP.NET程序,php - PHP程序,jsp - JSP程序,examples - 演示文件)

关于KindEditor组件上传本地图片报服务器异常的错误

今天突然间接到一个异常信息的问题,说系统的在线文本编辑器里上传本地图片报服务器异常的错误信息,开始我用firebug调试,发现前台不报错,然后我去服务器日志里找,也没看到相关信息.看网上写的说有可能是路径或者有可能是权限问题,我看权限已经设置,路径看后干脆直接改成: $save_path = '../../xxx';//相对upload_json.php的位置来说 $save_url = ' 但是我发现上传的时候还是报错,最后刷新缓存.好了. 注:我用的是php版.

是用博客园发表博客是如何上传本地图片

之前写了一篇带有图片的文章,我是直接从Word文档copy过来的,结果发现图片没有,找了很多资料,都说的很麻烦,最后还是自己找到了一简单方法, 这样,你的图片就可以上传了! 是用博客园发表博客是如何上传本地图片

动态input file多文件上传到后台没反应的解决方法!!!

其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传到后台没反应的写法(页面上写死的上传到后台是可以的) 这段代码是写在table>>下的form表单里的 <input type="button" name="button" value="添加附件" onclick="ad

html5上传本地图片,在线预览及裁剪(filereader,canvas)

1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewImage(file) { if (file.files && file.files[0]) { var img = document.getElementById('imghead'); var reader = new FileReader(); //读取file完成之后加载 reader.o