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. The sequence and de novo assembly of the giant panda genome.ppt

    sequencing:使用二代测序原因:高通量,短序列 不用长序列原因: 1.算法错误率高 2.长序列测序将嵌合体基因错误积累.嵌合体基因:通过重组由来源与功能不同的基因序列剪接而形成的杂合基因 se ...

  2. python学习笔记(16)hashlib.md5摘要算法(哈希算法)

    一.摘要算法格式 import hashlib #导入hashlib模块 md = hashlib.md5() #获取一个md5加密算法对象 md.update('how to use md5 in ...

  3. ABC:Meaningful Mean

    题目描述 You are given an integer sequence of length N, a= {a1,a2,…,aN}, and an integer K. a has N(N+1)⁄ ...

  4. Excel-DNA项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【VB.Net版】

    Excel-DNA项目中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在Class1.vb这个默认文件中. 大家可以在Visual Studi ...

  5. Linux quota磁盘配额

    quota:磁盘配额 限制某一群组所能使用的最大磁盘配额 限制某一用户的最大磁盘配额 使用限制: 仅能针对整个filesystem 核心必须支持quota quota的记录文件 只对一般身份使用者有效 ...

  6. springboot学习笔记:7.IDEA下5步完成热部署配置

    开发工具IDEA 2017.02   JDK1.8 1.pom.xml中增加: <dependency> <groupId>org.springframework.boot&l ...

  7. django的引入安装

    一 django引入 1 web应用介绍 1 什么是web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件 ...

  8. 细看Java序列化机制

    概况 在程序中为了能直接以 Java 对象的形式进行保存,然后再重新得到该 Java 对象,这就需要序列化能力.序列化其实可以看成是一种机制,按照一定的格式将 Java 对象的某状态转成介质可接受的形 ...

  9. SHELL用法九(awk练习)

    1.SHELL编程Awk语句案例实战 Awk主要是用于对文本文件进行处理,通常是逐行处理,其语法参数格式为, AWK常用参数.变量.函数详解如下: awk 'pattern + {action}' f ...

  10. 密码子演化假说|凝固事件假说|立体化学假说|共进化假说|代谢途径相关性假说|四重兼并|假四重兼并|最小损伤原则|AU-rich|GC-rich|逐步进化假说|分子机制进化假说

    生命组学 将密码子表重排后发现,嘌呤嘧啶含量不同,密码子的氨基酸种类由第一二位决定,同时第三位变化大却没有蛋白质层面上实质性的改变,这说明第三位氨基酸是用于维持氨基酸组成不发生变化同时保证蛋白质稳定性 ...