URL.createObjectURL 和 FileReader.readAsDataURL处理图像

现在AI的回答都可以大部分解决我们的问题，比如下面AI的回答 URL.createObjectURL 和 FileReader.readAsDataURL 都是处理文件和图像的常用方法，但它们在用途和性能上有所不同。以下是两种方法的对比：

1. URL.createObjectURL

• 用途：这个方法用于创建一个表示参数中给定的文件对象或 Blob 的URL。这个URL可以用于 <img> 标签的 src 属性，或者其他需要URL的地方。
• 性能：这个方法不涉及数据的编码过程，它只是创建一个指向文件的指针。因此，它的性能通常很好，特别是对于大文件。
• 内存管理：需要手动调用 URL.revokeObjectURL 来释放创建的URL，以避免内存泄漏。
• 兼容性：大多数现代浏览器都支持这个方法。
• 使用场景：适合于需要直接引用文件的场景，如图片预览、文件下载链接等。
• URL.createObjectURL 和 URL.revokeObjectURL 是 HTML5 引入的两个方法，它们允许在浏览器中创建和释放被引用文件的URL。

2. FileReader.readAsDataURL

• 用途：这个方法用于读取文件内容，并将文件内容以 Data URL 的形式返回。Data URL 是一种特殊的URL模式，它包含了文件的编码数据。
• 性能：这个方法需要将文件内容编码为 Base64 格式，这是一个相对耗时的过程，特别是对于大文件。Base64 编码的数据通常比原始二进制数据体积大约1/3。
• 内存管理：不需要额外的内存管理，因为 FileReader 不会创建持久的URL。
• 兼容性：大多数现代浏览器都支持这个方法。
• 使用场景：适合于需要将文件内容嵌入到文档中的场景，如将图片直接嵌入HTML页面。

哪种方法更好？

• 如果性能是关键考虑因素：对于大文件，URL.createObjectURL 通常更好，因为它避免了编码过程，直接引用文件。
• 如果需要将文件内容嵌入到文档中：FileReader.readAsDataURL 更适合，因为它可以直接将文件内容转换为Base64字符串，方便嵌入。
• 内存管理：如果你希望减少内存管理的负担，FileReader.readAsDataURL 可能更好，因为它不需要额外的清理步骤。
• 使用场景：根据你的具体需求选择。如果需要快速预览文件，URL.createObjectURL 更合适；如果需要将文件内容直接嵌入到页面中，FileReader.readAsDataURL 更合适。

总的来说，没有绝对的“更好”，选择哪种方法取决于你的具体需求和使用场景。

URL.createObjectURL使用

const imageUrl = ref('')
if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value)
    imageUrl.value = ''
}
imageUrl.value = URL.createObjectURL(rawFile)

FileReader.readAsDataURL使用

const imageUrl = ref('')
async function handleCurrentFile(file: File) {
  imageUrl.value = (await getBase64(file)) as string
}

// 获取图片转base64
function getBase64(file: File) {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    let imgResult = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result as string
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
}