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

  • 相关阅读:
    EL表达式_1
    Servlet2
    Servlet1
    安装Tomcat
    Java日期时间3
    SpringCloud之Ribbon负载均衡
    SpringCloud之Eureka注册中心
    存储过程—增减字段
    880. Decoded String at Index
    977. Squares of a Sorted Array
  • 原文地址:https://www.cnblogs.com/liang-meng/p/12852721.html
Copyright © 2011-2022 走看看