ts创建一个Input,添加事件监听器,函数类型报错?

作者站长头像
站长
· 阅读数 6

ts创建一个Input,添加事件监听器,函数类型报错?

ts创建一个Input,添加事件监听器,函数类型报错?


    function onUpload() {
        const input = document.createElement("input")
        input.setAttribute("type", "file")
        input.setAttribute("accept", "image/*")
        input.addEventListener("input", handleUpload) // 这一行的 handleUpload 类型报错
        input.click()

        function handleUpload(e: InputEvent) {
            const target = e.target as HTMLInputElement
            if (!target) return

            const file = target.files![0]
            if (!file) return

            const type = file.type as ImageExcAll
            if (!ImageFileTypes.includes(type)) return
            fetchFileData(file)

            const imgUrl = URL.createObjectURL(file)
            dispatch(changeImgUrl(imgUrl))
        }

        function fetchFileData(file: File) {
            const fileData = new FormData()
            fileData.append("file", file)

            setLoading(true)
            const intervalId = setInterval(() => (rate < 100 && setRate(prev => prev + 1)), 40)
            getTableData(fileData).then(({ code, data }) => {
                if (code !== 0) return
                const { point: points, "measure-items": tableData, "ruler-scaling": rulerScaling } = data

                dispatch(changePointList(points))
                dispatch(setTableData(tableData))
                dispatch(setRulerScaling(rulerScaling))

                sessionStorage.setItem("points", JSON.stringify(points))
                sessionStorage.setItem("tableData", JSON.stringify(tableData))
                sessionStorage.setItem("rulerScaling", JSON.stringify(rulerScaling))
                setTimeout(() => setLoading(false), 500)
                clearInterval(intervalId)
                setRate(100)
            })
        }
    }
回复
1个回答
avatar
test
2024-06-26
  input.addEventListener("input", (e: Event) => {
    const target = (e.target as HTMLInputElement);
  })
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容