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进行图片的下载!因为其他的连接都是点击打开啊啊啊啊

 

posted @ 2020-05-08 19:56  LiangM  阅读(761)  评论(0编辑  收藏  举报