let img = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg"; //imgurl 就是你的图片路径
        let image = new Image();
        image.src = img;
        let self = this;
        image.setAttribute("crossOrigin", "Anonymous");
        image.onload = function () {
          var base64 = self.getBase64Image(image);
          // document.getElementById("img")['src'] = base64;
          var formData = new FormData();
          //转换base64到file
          var file = self.btof(base64, "test");
          console.log(file);
          file.url = self.initForm["coverUrl"];
          self.fileList.push(file);
          console.log(file)
          formData.append("imageName", file);
        };
 /** url 转换成img */
  getBase64Image(img): any {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
  }
  btof(data, fileName) {
    const dataArr = data.split(",");
    const byteString = atob(dataArr[1]);
    const options = {
      type: "image/jpeg",
      endings: "native"
    };
    const u8Arr = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      u8Arr[i] = byteString.charCodeAt(i);
    }
    return new File([u8Arr], fileName + ".jpg", options);
  }
亲测有效,但是你的服务器地址得设置可以跨域,否则toDataUrl不能使用

将url转化成file文件的更多相关文章

  1. FormData序列化及file文件上传

    表单数据上传 情况一: 一.当表单文件处于无任何处理状态时,用submit提交直接上传; 但这种方式上传,数据无任何处理:(极少使用): 但是传统的表单提交会导致页面刷新,但是有些情况下,我们并不希望 ...

  2. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  3. json串转化成xml文件、xml文件转换成json串

    1.json串转化成xml文件 p=[{"name":"tom","age":30,"sex":"男" ...

  4. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  5. input标签file文件上传图片本地预览

    <input type="file" name="img-up" id="img-up" value="" /&g ...

  6. Java File文件操作 创建文件\目录,删除文件\目录

    Java手册 java.io 类 File java.lang.Object java.io.File 所有已实现的接口: Serializable, Comparable<File> p ...

  7. C++ 获取URL图片、html文件,CInternetSession 【转】

    http://blog.csdn.net/gnixuyil/article/details/7688439 获取网络图片 CString URL="http://www.google.com ...

  8. 【电子签章】HTML格式合同转化成PDF文件

    代码地址如下:http://www.demodashi.com/demo/12476.html 一.主要思路 通过itextpdf 生成想要的pdf 文件 通过itextpdf 中 XMLWorker ...

  9. JAVA通过URL链接获取视频文件信息(无需下载文件)

    最近项目碰到一个大坑:APP上需要在获取视频列表时就获取视频的时长,但早期上传的时候数据库都没有保存这个数据,所以前段时间添加一个时长字段,在上传时手动输入视频时长,但是之前库中有上万条数据没这个信息 ...

随机推荐

  1. imageMso7345.rar

    本工具用于Office开发中的customUI设计,查询内置图标的工具. 解压后,有2个Excel文件. 第一个文件的动态图: 第2个文件也可以查询图标: 下载地址: imageMso7345.rar

  2. 非IoC方式访问Servlet API的两种方法

    使用ActionContext访问 ActionContext来自com.opensymphony.xwork2.ActionContext 具体实现代码段如下: <span style=&qu ...

  3. ML modeling process

    一.数据读取Load Data 二.数据分析EDA 三.数据预处理 四.特征工程Feature engineering 五.modeling & Tuning 六.Result 七.other ...

  4. MAC地址和IP地址是否缺一不可

    答案是肯定的,我们来具体分析: 在网络传输的过程中,第一次将信息从A端发往B端时,首先在A端需要将信息从应用层开始到物理层进行逐层封装,到达B端后再从物理层到应用层进行逐层分用解包,最后拿到信息. 信 ...

  5. 牛客-Highway

    题目传送门 sol:看了题意显然是最大生成树,但是任意两个点之间都有边,大概有n*n条边.用朴素的最小生成树算法显然不行.联想了一下树的直径还是不会.看了大佬的题解,懂了... 所以还是直接贴大佬博客 ...

  6. CF-544:部分题目总结

    -------------------昨天打的重现赛,感觉是我打的发挥的最好的一场比赛了,六题都一次AC.那么就来总结一下吧 题目链接:http://codeforces.com/contest/11 ...

  7. HDU-1403-Longest Common Substring(后缀数组的高度数组运用)

    这题要求两个串中的最长相同子串的长度.高度数组可以求一个串中的最长相同子串的长度.所以想到把两个串连起来,但是这样又会产生一些新的串(第一个串的结尾和第二个串的开头组成的)于是在两个串中间放一个'\0 ...

  8. Ubuntu gnome安装Monaco字体,FontForge module is probably not installed

    首先下载原始Monaco字体,注意我只找到了这一款在ubuntu的gnome下可见,其他的各种monaco即使安装了也看不到. https://gist.github.com/epegzz/16342 ...

  9. tomcat启动后access error[730048]的解决方法

    安装了JDK... 配置了系统变量... 解压了tomcat... 配置了系统变量... 点击startup.bat启动了以后,打开浏览器,出现access error 404错误. 仔细看过控制台输 ...

  10. 【内推】平安产险大数据测试开发工程师,15-30k!

    平安产险技术岗内部推荐-大数据测试开发工程师等-欢迎中年人和2020应届生 上班地点:深圳福田平安金融中心 另有大量 上海 北京 成都 广州 岗位 交流qq群 828186629 微信pythonte ...