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

  • 相关阅读:
    Docker安装以及运行第一个HelloWorld
    logstash-配置文件详解
    oh my zsh 常用插件
    Linux之Shell基本命令
    Linux的基本命令
    Vue
    rest_framwork之认证组件,权限组件,频率组件
    rest_framwork之序列化组件
    rest_framwork之APIView
    中间件
  • 原文地址:https://www.cnblogs.com/liang-meng/p/12852721.html
Copyright © 2020-2023  润新知