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 ...
随机推荐
- PHP生成唯一的促销/优惠/折扣码,由字母和数字组成。
首先我们先搞清楚什么是促销/优惠/折扣码?它有什么用作: 每一个电子商务网站,现在有一种或多种类型的优惠/折扣/优惠券系统,给大家分享一下如何在PHP生成唯一的促销/折扣码.主要是实现一个优惠码系统, ...
- Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画
原文:Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画 或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新,追问下去HLSL到底是何方神圣能实现如此炫酷之效果?层 ...
- pl/sql进阶——例外处理
在pl/sql的执行过程中发生异常时系统所作的处理称为一个例外情况(exception).通常例外情况的种类有三种: ①预定义的oracle例外情况,oracle预定义的例外情况大约有24个,对于这种 ...
- List容器-LinkedList链表
LinkedList--链表 特点: 删除,增加 用LinkedList性能高 层次查找不适合 查询用ArrayList 数组下标查找 插入和删除慢缺点是要做移位操作 总结:Link ...
- UDP传输对象--JavaSE考试题
Server.java package com.sxt.udp.object; import java.io.ByteArrayInputStream; import java.io.ObjectIn ...
- 详解 CALayer 和 UIView 的区别和联系
http://www.cocoachina.com/ios/20150828/13244.html 作者:@武蕴牛x 授权本站转载. 前言 前面发了一篇iOS 面试的文章,在说到 UIView 和 C ...
- sql常用内置函数
用于测试的表: 一.SUM 返回数值列的总数. 执行查询: select SUM(Score) as 总得分 from Students 效果: 二.MAX 返回一列中的最大值.. 执行查询: sel ...
- 字符串分割+二维数组 Day15练习
package com.sxt.arrays.test; import java.util.Arrays; /* 1,2,3,4!5,6,7!8,9!12,456,90!32 * 将此字符串以叹号为分 ...
- 14 个你可能不知道的 JavaScript 调试技巧
了解你的工具可以极大的帮助你完成任务.尽管 JavaScript 的调试非常麻烦,但在掌握了技巧 (tricks) 的情况下,你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bug ...
- POLARDB 2.0 重磅升级,分别支持Oracle与PostgreSQL
点击订阅新品发布会! 新产品.新版本.新技术.新功能.价格调整,评论在下方,下期更新!关注更多内容,了解更多 最新发布 POLARDB 2.0 重磅升级 2019年6月19日15时,阿里云 POLAR ...