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. Qt 项目中main主函数及其作用

    main.cpp 是实现 main() 函数的文件,下面是 main.cpp 文件的内容. #include "widget.h" #include <QApplicatio ...

  2. ESTScan|EORF|Augustus|nr|PSM|

    生物信息学方法的目的有二:1.常规找鉴定已知蛋白2.鉴定新蛋白 控制数据库大小可以通过增多酶切使得大数据库灵敏性增高数据量变小: 分步搜索是对于经典方法使用后找不到的新蛋白进行补充挖掘,预测蛋白与高可 ...

  3. FPGA底层的时钟布线以及内部layout

    https://wenku.baidu.com/view/441549fef111f18582d05a70.html 全局时钟是最简单的最可预测的时钟,时钟方案:有专用的时钟输入(提供最短的始终输出延 ...

  4. git 忽略规则

    # 以'#'开始的行,被视为注释. # 忽略掉所有文件名是 foo.txt的文件. foo.txt # 忽略所有生成的 html文件, *.html # foo.html是手工维护的,所以例外. !f ...

  5. unique()函数使用

    前提:要先令容器有序. unique的作用是“去掉”容器中相邻元素的重复元素(不一定要求数组有序),它会把重复的元素添加到容器末尾(所以数组大小并没有改变),而返回值是去重之后的尾地址. 用法:uni ...

  6. 基于Springboot注解的策略模式

    释义 策略模式和多态很相似 可以理解为定义了一个统一的接口,有许多不同的实现类,可以自由选择不同的实时类去执行. 实现 上代码: 定义一个统一的接口: [JavaScript] 纯文本查看 复制代码 ...

  7. IT男频繁猝死背后的心理探秘

    "深圳36岁IT男猝死酒店马桶上"这条新闻再次成为人们眼球的焦点,每每发生这样的事情,难免让人扼腕唏嘘,他们本该是风华正茂的年纪,家有老母贤妻爱子,甚至房子车子票子都不缺,该是一边 ...

  8. 《软件自动化测试开发-Java和Python测试开发实用指南》出版了

    1.关于书中下载链接的问题:出现404,页面不存在 解答:大小写要区分,l和1不能弄错了 2.关于勘误,出现极个别漏子少字错字 解答:后续版本会改进,目前能理解就好了 ---------------- ...

  9. 360若真入股HTC 到底是谁来拯救谁

    到底是谁来拯救谁" title="360若真入股HTC 到底是谁来拯救谁"> 我总是持有一种观点,那就是拯救是相互的.就像老师拯救"堕落"学生, ...

  10. Java 多线程(上)

    启动一个多线程 多线程即在同一时间,可以做多件事情,创建多线程有3种方式,分别是继承线程类,实现Runnable接口,匿名类 线程概念 首先要理解进程(Processor)和线程(Thread)的区别 ...