1.js读取文件
/**
* 上传图片
* @param file 传入获取的文件
* @author wangzhen 2018-09-07
*/
function loadImg(file,callback){
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload=function(e) {
// console.log('文件读取完成');
imgFile = e.target.result;
// console.log(imgFile);
// $("#imgLicense").attr('src', imgFile);
// callback(imgFile);
callback(file);
};
//正式读取文件
reader.readAsDataURL(file);
}
2.将以base64的图片url数据转换为Blob
// -------- 将以base64的图片url数据转换为Blob --------
function convertBase64UrlToBlob(urlData, filetype){
//去掉url的头,并转换为byte
var bytes = window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
var i;
for (i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type : filetype});
}
3.input获取
3.1 html部分
<div class="file-box">
<input type="file" class="file-btn" @change="uploadImg($event)" readonly="readonly"/>
上传图片
</div>
3.2 css部分
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: red;
border-radius: 5px;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
3.3 js部分
function uploadImg(event){
// console.log(event);
var imgFile = event.target.files[0];
//传递参数fd
var fd = new FormData();
fd.append("file",imgFile);
}