<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. 海胜专访--MaxCompute 与大数据查询引擎的技术和故事

    摘要:在2019大数据技术公开课第一季<技术人生专访>中,阿里巴巴云计算平台高级技术专家苑海胜为大家分享了<MaxCompute 与大数据查询引擎的技术和故事>,主要介绍了Ma ...

  2. jQuery $.isNumeric vs. $.isNaN vs. isNaN

    在jQuery中,有几种方式可以判断一个对象是否是数字,或者可否转换为数字. 首先,jQuery.isNaN()在最新版本中已经被移除了(1.7之后),取而代之的是  jQuery.isNumeric ...

  3. KiCad EDA 5.1.3 正式发布了

    KiCad EDA 是一款用于印刷电路板设计的开源自由软件,最初由法国人 Jean-Pierre Charras 于 1992 年推出1,现由 KiCad 开发团队维护. KiCad 目前支持英语.法 ...

  4. Effective C++: 01让自己习惯C++

    01:视C++为一个语言联邦 1:今天的C++已经是个多重范型编程语言(multiparadigm programming language),一个同时支持过程形式(procedural).面向对象形 ...

  5. phpexcel使用说明4

    <div class="postBody"> <div id="cnblogs_post_body"><p>PHPExcel ...

  6. ELK2之ELK的语法学习

    1.回顾 (1)es是什么? es是基于Apache Lucene的开源分布式(全文)搜索引擎,提供简单的RESTful API来隐藏Lucene的复杂性. es除了全文搜索引擎之外,还可以这样描述它 ...

  7. UVALive - 4787 ICPC WF 2010 Tracking Bio-bots【dp】

    UVa 4787 WF题果然不一样,本来想暴力搜索,数据太大了,数组都开不了.看题解也不太懂,记录一下书上的题解,以后再看: 此题是给出N*M的格子,有些地方是墙,不可走.求所有不能只通过向上或者向右 ...

  8. SDUT-3331_数据结构实验之串三:KMP应用

    数据结构实验之串三:KMP应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个小朋友,每个小朋友手里有一些糖块, ...

  9. 规模化落地云原生,阿里云即将重磅亮相 KubeCon China

    2019 年 6 月 24 日至 26 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCo ...

  10. @codeforces - 1086F@ Forest Fires

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 一个无穷大的方格图,每个方格内都种了棵树. 一开始点燃了 n 棵 ...