vue-上传文件
<label for="exampleInputFile">头像</label>
<img :src=" imgsrc != '' ? imgsrc :'../img/timgs.png'" class="iconfont icon-tupian" onclick="strike()" id="headPortraitImgShow" alt="" width="50px" height="50px" />
<input type="file" id="headPortraitUpload" style="margin-top:10px;display: none">
HTML代码
$(function () {
$("#headPortraitUpload").on("change",headPortraitListener);
/*定义全局变量存贮图片信息*/
var base64head="";
/*头像上传监听*/
function headPortraitListener(e) {
var img = document.getElementById('headPortraitImgShow');
if(window.FileReader) {
var file = e.target.files[0];
var reader = new FileReader();
if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
} else {
img.css('display', 'none');
img.attr('src', '');
}
reader.onloadend = function (e) {
img.setAttribute('src', reader.result);
base64head = reader.result;
}
}
}
}
function strike() {
document.getElementById("headPortraitUpload").click();
}
Jquery将图片给img
var formFile = new FormData();
var sum = document.getElementById("headPortraitUpload").files.length;
for (var i = 0;i < sum;i++){
formFile.append("file", document.getElementById("headPortraitUpload").files[i]); //加入文件对象
}
if(id){
formFile.append("id",id);
}
formFile.append("account",this.account);
formFile.append("password",this.password);
formFile.append("confirmPassword",this.passwords);
formFile.append("name",this.name);
formFile.append("mobile",this.phone);
formFile.append("companyId.id",this.firmdown);
formFile.append("roles",this.rolelist);
var header={
'token':CDK.token,
'Content-Type': 'multipart/form-data'
};
axios请求时,注意加上请求头,以FormData转换
vue-上传文件的更多相关文章
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- vue上传文件
<div> <input type="file" class="file" name="file" @change=&qu ...
- vue+上传文件夹
在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...
- vue 上传文件 并以表格形式显示在页面上
先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...
- Vue上传文件:ElementUI中的upload实现
一.上传文件实现 两种实现方式: 1.直接action <el-upload .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...
- ant design for vue 上传文件
1.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 定义customRequest,之前定义action行为会被覆盖,可 ...
- 阿里OSS Vue上传文件提示The OSS Access Key Id you provided does not exist in our records.解决方法
vue项目 1.安装OSS的Node SDK npm install ali-oss --save 2.参考官方提示https://help.aliyun.com/document_detail/11 ...
- vue 上传进度显示
参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...
随机推荐
- 用JS实线放大镜的效果
今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...
- Bellman-Ford(可解决负权边)--时间复杂度优化
Bellman-Ford 可解决带有负权边的最短路问题 解决负权边和Dijkstra相比是一个优点,Bellman-Ford的核心代码只有4行:: u[],v[],w[] 分别存一条边的顶点.权值,d ...
- python的解释器类型
Python解释器 当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件. 由于整个Python语言从规 ...
- nodeJs学习-16 数据字典示例
1.banner ID title 标题 varchar(32) sub_title 副标题 varchar(16) src 图片地址 varchar(64) 2.文章 ID author 作者 va ...
- prepareStatement设置参数,mysql数据出现中文‘?’的情景与解决方式
在prepareStatement中传入中文的参数,mysql数据库中出现“?”号 try { Class.forName("com.mysql.jdbc.Driver"); co ...
- “不是不需要运维工程师,是人人皆是运维”|对话阿里云MVP蒋烁淼(上)
摘要: 与湖畔大学首期学员.阿里云MVP.驻云创始人蒋烁淼面对面 [三位阿里云MVP(驻云CEO.首席架构师.大数据总监)<MVP时间>首次同台授课,“湖畔第一大脑” 蒋烁淼领头线上精讲, ...
- shell学习(15)- eval及shell No such file or directory解决办法
eval可以读取一连串的参数,然后按照参数特性来执行.参数数目不限,彼此之间用分号隔开. eval会对后面的命令进行两遍扫描,如果第一遍扫描后,命令是个普通命令,则执行此命令:如果命令中含有变量的间接 ...
- 01-常见Dos命令、Java历史、Java跨平台、配置Path环境变量、第一个HelloWorld例子
常见Dos命令 dir: 列出当前目录下的文件以及文件夹 md: 创建目录 rd: 删除目录 cd: 进入指定目录 del: 删除文件 copy: 复制文件 xcopy: 复制目录 tree: 列出目 ...
- MAYA安装失败怎样卸载重新安装MAYA,解决MAYA安装失败的方法总结
技术帖:MAYA没有按照正确方式卸载,导致MAYA安装失败.楼主也查过网上关于如何解决MAYA安装失败的一些文章,是说删除几个MAYA文件和MAYA软件注册表就可以解决MAYA安装失败的问题,实际的情 ...
- java执行sql语句使用别名时显示Column '***' not found
java执行sql语句使用别名时显示Column '*' not found 在做一个小项目时遇到个问题,执行sql语句使用别名时总是报sql异常 Column '*' not found,折腾半天终 ...