<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-上传文件的更多相关文章

  1. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  2. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  3. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  4. vue上传文件

    <div> <input type="file" class="file" name="file" @change=&qu ...

  5. vue+上传文件夹

    在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...

  6. vue 上传文件 并以表格形式显示在页面上

    先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...

  7. Vue上传文件:ElementUI中的upload实现

    一.上传文件实现 两种实现方式: 1.直接action <el-upload  .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...

  8. ant design for vue 上传文件

    1.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 定义customRequest,之前定义action行为会被覆盖,可 ...

  9. 阿里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 ...

  10. vue 上传进度显示

    参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...

随机推荐

  1. bzoj3899 弦论

    好久没有更blog了啊... 对于一个给定长度为N的字符串,求它的第K小子串是什么. 这是一个SAM的模板题. 我好弱啊这个时候才开始学SAM,才会用指针. 要维护3个东西:每个状态right集合的大 ...

  2. C++不支持默认的int

    VS: 工程属性->C/C++->命令行->输入 /wd4430

  3. 两种方法使vue实现jQuery调用

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...

  4. 只在需要的时候 Polyfill 你的 JavaScript 代码

    本文转载自 Pascal Klau,他是一名来自德国南部的实习生,他讨厌不必要的 HTTP 请求,也不爱吃西兰花.Pascal 将说明使用 polyfill 服务的一种方式,在这种方式下你可能可以完全 ...

  5. java时间还在用date和calender?换LocalDateTime吧!

    java在时间计算上一直为人所诟病,在社区强烈反应下,java8推出了线程安全.简易.高可靠的时间包.并且数据库中也支持LocalDateTime类型,所以在数据存储时候使时间变得简单. LocalD ...

  6. python已安装包的查看方法和requirements.text的使用

     1.已经安装包的查看方法 命令pip freeze 2. 批量导出命令 pip freeze >requirements.txt 3. 批量导入命令 pip install -r requir ...

  7. “龙井”开箱评测 |Alibaba Dragonwell 新手上路指南

    作者|阿里云智能事业群 高级技术专家 陆传胜 阿里巴巴有着最丰富的 Java 应用场景,覆盖电商,金融,物流等众多领域,是世界上最大的 Java 用户之一. 2019 年 3 月 21 日,阿里巴巴在 ...

  8. bzoj1911 特别行动队

    Description Input Output Sample Input 4 -1 10 -20 2 2 3 4 Sample Output 9       斜率优化 推式子 #include< ...

  9. 基于Spark Mllib的Spark NLP库

    SparkNLP的官方文档 1>sbt引入: scala为2.11时 libraryDependencies += "com.johnsnowlabs.nlp" %% &qu ...

  10. Linux下配置 Keepalived(心跳检测部署)

    首先呢,我想先给大家简单介绍一下什么是keepalived: Keepalived的作用是检测服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的服务器 ...