1. Q：a 標(biāo)簽下載文件
A:
<a
class="download small-hand"
:href=linkConf
download="template_1544007466.xlsx"
>
下載模板
</a>
linkConf:linkConfig.getHost()+"/example/bn_card_grant.xlsx"
2.Q:input file 文件上傳
A:
布局：html
<a href="#" class="update_logo small-hand">編輯logo</a>
<input
type="file"
name="upload_logo_img"
class="upload_img small-hand"
ref="inputer"
@change="changepic($event)"
accept="image/png,image/jpeg,image/gif,image/jpg"
id="logo-input"
>
css:
.upload_logo>.upload_img {
width: 138px;
height: 30px;
position: relative;
bottom: 20px;
z-index: 100;
opacity: 0;
}
js:
changepic(){
let inputDOM = this.$refs.inputer;// 通過DOM取文件數(shù)據(jù)
let fileObj = inputDOM.files[0];//獲取文件信息
let size = '',format = '',index;
if(fileObj){
index = fileObj.name.lastIndexOf(".");
format = fileObj.name.substring(index+1);
size = (fileObj.size / (1024 * 1024)).toFixed(2);
}
if(format != 'jpg' && format != 'png'){
this.$toast('格式不正確蛉谜，請重新上傳',this.toastType)
return;
}
if(size > 1){
this.$toast('請選擇不大于1M的圖片',this.toastType)
document.getElementById('logo-input').value = ""
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileObj); // 讀出 base64
let that = this;
reader.onloadend = function () {
//圖片的 base64 格式, 可以直接當(dāng)成 img 的 src 屬性值
that.uplpadImg = reader.result;
}
let fileInfo = {
imageFile:fileObj,
xxx:xxx\
}
this.$uploadFile('xxxxx',fileInfo,this).then((response)=>{
})
},
3.Q:js下載文件兼容各種瀏覽器
A:
chrome、火狐崇堵、360都可以
downloadIamge(imgsrc, name) {//下載圖片地址和圖片名
var image = new Image();
// 解決跨域 Canvas 污染問題
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到圖片的base64編碼數(shù)據(jù)
var a = document.createElement("a"); // 生成一個a元素
var event = new MouseEvent("click"); // 創(chuàng)建一個單擊事件
a.download = name || "photo"; // 設(shè)置圖片名稱
a.href = url; // 將生成的URL設(shè)置為a.href屬性
a.dispatchEvent(event); // 觸發(fā)a的單擊事件
};
image.src = imgsrc;
},
IE瀏覽器圖片保存本地
SaveAs5(imgURL){
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
},
