问答

图片src赋值,ts报错应为“;”。ts(1005)

作者:admin 2021-07-22 我要评论

遇到一个需求,编辑图片,后台给url给我,有就显示默认的,也可以上传或者删除,最后把修改后的文件对象(formData)给后台。上传借助了elementUI,我就想着如果...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

遇到一个需求,编辑图片,后台给url给我,有就显示默认的,也可以上传或者删除,最后把修改后的文件对象(formData)给后台。上传借助了elementUI,我就想着如果能把url转为file对象,就可以实现了

网上各种收搜:只搜到这种方法 url转file对象

大概这个样子

// url转文件对象
export function url2File(url: string,imgPos: number): any {
  const image = new Image(300,300);
    // 给img加上随机值一部分情况下能解决跨域
    // image.src = url + '?time=' + new Date().valueOf();
    image.src = url;
    // 允许跨域操作
    image.setAttribute("crossOrigin",'Anonymous');
    image.onload = function(){
      const base64 = getBase64Image(image);
      console.log('b64  ',base64)
      let imgDom: HTMLImageElement | null = document.querySelectorAll("ul.el-upload-list li")[imgPos].querySelector('img');
      imgDom && imgDom.src = base64.dataURL as string;
      const newFile = dataURLtoFile(base64,'name');
      console.log('file   ',newFile);
      return newFile
    }
  function getBase64Image(img: HTMLImageElement):objectData {
    let demoCanvas: any = document.createElement("canvas");
    console.log(img.style);
    demoCanvas.width = img.width;
    demoCanvas.height = img.height;
    const ctx = demoCanvas.getContext("2d");
    ctx.drawImage(img, 0, 0, 300, 300);
    const ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    const dataURL: string = demoCanvas.toDataURL("image/"+ext);
    return {
      dataURL,
      type: "image/"+ext
    };
  }
  function dataURLtoFile(dataurl: objectData, filename: string) {
    const arr = dataurl.dataURL.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1])
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while(n--){
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
  }
}

报了这个错
image.png

我ts版本:

    "typescript": "~3.8.3",

这是什么错误呢,还有关于我这个需求有更好的思路实现的话也忘同行们不吝点拨一下,谢谢!

###

加括号。

imgDom && (imgDom.src = base64.dataURL as string);

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 图片src赋值,ts报错应为“;”。ts(100

    图片src赋值,ts报错应为“;”。ts(100

  • git如何提取某人在某段时间的所有commi

    git如何提取某人在某段时间的所有commi

  • crc32算法的一个问题

    crc32算法的一个问题

  • vue请求跨域问题

    vue请求跨域问题

腾讯云代理商
海外云服务器