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 ...
随机推荐
- 海胜专访--MaxCompute 与大数据查询引擎的技术和故事
摘要:在2019大数据技术公开课第一季<技术人生专访>中,阿里巴巴云计算平台高级技术专家苑海胜为大家分享了<MaxCompute 与大数据查询引擎的技术和故事>,主要介绍了Ma ...
- jQuery $.isNumeric vs. $.isNaN vs. isNaN
在jQuery中,有几种方式可以判断一个对象是否是数字,或者可否转换为数字. 首先,jQuery.isNaN()在最新版本中已经被移除了(1.7之后),取而代之的是 jQuery.isNumeric ...
- KiCad EDA 5.1.3 正式发布了
KiCad EDA 是一款用于印刷电路板设计的开源自由软件,最初由法国人 Jean-Pierre Charras 于 1992 年推出1,现由 KiCad 开发团队维护. KiCad 目前支持英语.法 ...
- Effective C++: 01让自己习惯C++
01:视C++为一个语言联邦 1:今天的C++已经是个多重范型编程语言(multiparadigm programming language),一个同时支持过程形式(procedural).面向对象形 ...
- phpexcel使用说明4
<div class="postBody"> <div id="cnblogs_post_body"><p>PHPExcel ...
- ELK2之ELK的语法学习
1.回顾 (1)es是什么? es是基于Apache Lucene的开源分布式(全文)搜索引擎,提供简单的RESTful API来隐藏Lucene的复杂性. es除了全文搜索引擎之外,还可以这样描述它 ...
- UVALive - 4787 ICPC WF 2010 Tracking Bio-bots【dp】
UVa 4787 WF题果然不一样,本来想暴力搜索,数据太大了,数组都开不了.看题解也不太懂,记录一下书上的题解,以后再看: 此题是给出N*M的格子,有些地方是墙,不可走.求所有不能只通过向上或者向右 ...
- SDUT-3331_数据结构实验之串三:KMP应用
数据结构实验之串三:KMP应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个小朋友,每个小朋友手里有一些糖块, ...
- 规模化落地云原生,阿里云即将重磅亮相 KubeCon China
2019 年 6 月 24 日至 26 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCo ...
- @codeforces - 1086F@ Forest Fires
目录 @description@ @solution@ @accepted code@ @details@ @description@ 一个无穷大的方格图,每个方格内都种了棵树. 一开始点燃了 n 棵 ...