<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. AnalyticDB for MySQL 3.0 技术架构解析

    企业数据需求不断变化,近年来变化趋势日益明显,从数据的3V特性看:体积,速度和变化:Big Data强调数据量,PB级以上,是静态数据.而Fast Data在数据量的基础上,意味着速度和和变化,意味着 ...

  2. 【JZOJ4804】【NOIP2016提高A组模拟9.28】成绩调研

    题目描述 输入 输出 样例输入 5 3 1 2 3 1 2 1 2 1 1 1 1 样例输出 4 数据范围 解法 考虑设置左指针l和右指针r: 维护[l,r]的关于等第的桶. 初始l=r=0: 每次右 ...

  3. AI种黄桃AI卖黄桃 阿里巴巴推进一站式政务服务

    7月11日,武汉城市峰会期间,武汉.枣阳.荆门等多个城市发布了同阿里巴巴的最新合作.这些合作包括用人工智能改善武汉交通拥堵.降低枣阳黄桃种植成本.提升荆门城市治理和市民服务水平等.阿里云.蚂蚁金服.高 ...

  4. Java面向对象----String对象的声明和创建

    String a="abcd"  相等  String b="abcd" String a=new String("abcd")   不等于 ...

  5. JavaScript for循环 while循环

    循环可以将代码块执行指定的次数. JavaScript 循环 如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的. 我们可以这样输出数组的值: 一般写法: documen ...

  6. Android 高仿微信语音聊天页面高斯模糊效果

    目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...

  7. FZU 2234 牧场物语【多线程dp】

     Problem 2234 牧场物语  Problem Description 小茗同学正在玩牧场物语.该游戏的地图可看成一个边长为n的正方形. 小茗同学突然心血来潮要去砍树,然而,斧头在小茗的右下方 ...

  8. Python 变量赋值

  9. qt 中画线时如何设置笔的颜色和填充

    在上一次介绍中已经实现了自定义控件,并把Widget 放入了主界面中,画了一个圆,具体可参考“QT 自定义窗口” 下面我们介绍一下如何设置画笔颜色和所画图形的填充颜色. 画笔颜色: void Circ ...

  10. qt开发ROS遇到这个问题 find_package(catkin) failed. catkin was neither found in the workspace nor in the CMAKE_PREFIX_PATH...

    为了实现用Qt开发ROS界面开发环境,我几乎参阅了网上所有的配置教程,安装了多个版本的qt,在ubuntu14.04和ubuntu16.04上分别进行了配置,最后都成功了.不得不说的是用QTCREAT ...