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

ethanYin
  • 125

遇到一个需求,编辑图片,后台给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",

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

回复
阅读 3.7k
1 个回答
然后去远足
  • 35.2k
✓ 已被采纳

加括号。

imgDom && (imgDom.src = base64.dataURL as string);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏