eggjs+vue实现下载图片 js下载网络图片
1.eggjs安装egg-cors插件并开启
2.config.default.js中配置跨域允许访问的IP地址
config.cors = { origin:'http://localhost:8080', credentials: true, allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH' };
3.vue中:
function getBase64(imgUrl) { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); // 至关重要 xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { //得到一个blob对象 var blob = this.response; // console.log("blob", blob); // 至关重要 let oFileReader = new FileReader(); oFileReader.onloadend = function(e) { // 此处拿到的已经是 base64的图片了 let base64 = e.target.result; // console.log("方式一》》》》》》》》》", base64); }; oFileReader.readAsDataURL(blob); let src = window.URL.createObjectURL(blob); // console.log(src); let alink = document.createElement("a"); alink.href = src; var event = new MouseEvent("click"); // 模拟鼠标click点击事件 alink.download = "图片名字"; // 设置a节点的download属性值 alink.dispatchEvent(event); // 触发鼠标点击事件 } }; xhr.send(); }
利用base64进行图片的下载!因为其他的连接都是点击打开啊啊啊啊