以文本形式读取文件后，我无法从中重新创建文件

Question

我有一个图像/png文件，我需要使用

FileReader

api 读取它，然后从文本中创建

file

或

blob

这里的问题是当我尝试创建一个文件时，数据似乎已损坏我尝试在将文件读取为

dataURL

后将数据读取为文本，但有区别，我需要一种方法使

FileReader.readAsText

中的文本与

decoded dataURL by atob

中的文本相匹配

let inp = document.querySelector("input")

async function read(file,type) { 
    let reader = new FileReader
    reader[type](file)

    return new Promise((res) => { 
        reader.addEventListener("load",_ => { 
            res(reader.result)
        })
    })
}

function decodeDataUrl(dataurl) { 
   return atob(dataurl.split(',')[1])
}

inp.addEventListener("input",async _ => { 
    let [file] = inp.files

    let dataURL = await read(file,"readAsDataURL")
    let text = decodeDataUrl(dataURL)
    console.log({text,length: text.length});

    text = await read(file,"readAsText")
    console.log({text,length: text.length});
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file">
</body>
</html>

这是使用文件测试代码后的屏幕截图

备注：

我不需要任何库或框架，所以没有 jquery
不要提供比我知道的更好的处理文件或 blob 的另一种方法，我可以使用其他方法来管理文件数据，而不是通过
```
FileReader.readAsText
```
将其作为文本读取，但我无法控制这一点
别介意我的英语不好

Answer 1

答案 1 - 使用

readFileAsText

const binaryString = await read(file, "latin1");

文件中的字节作为 8 位字符代码插入到

binaryString

中。

binaryString

可以使用

转换为base64编码的字符串

const base64String = btoa(binaryString);

答案 2 - 使用

formData

MDN 上的 formData 方法示例对此进行了最好的介绍：

使用

formData.set

formData.set("userpic", myFileInput.files[0], "chris.jpg");

要使用同一命名表单字段上传多个文件，请使用
```
formData.append
```
方法。

以文本形式读取文件后，我无法从中重新创建文件

问题描述投票：0回答：1

1个回答

最新问题

以文本形式读取文件后，我无法从中重新创建文件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1