上传图片后预览图片小试

html 复制代码

<input type="file" id="file" accept="image/*" onchange="handleFileChange(event)" />
<img id="preview" src="" alt="Image Preview" />

第一种方式

直接使用 File 对象创建 Blob URL，使用URL.createObjectURL(blob)生成临时的访问地址。

js 复制代码

function handleFileChange(event) {
  const file = event.target.files[0]

  // 直接使用 File 对象创建 Blob URL
  if (file) {
    // 创建 Blob 对象
    const blob = new Blob([file], { type: file.type })

    // 生成 Blob URL 创建临时的地址
    const blobUrl = URL.createObjectURL(blob)

    // 将 Blob URL 设置为图片的 src 属性
    preview.src = blobUrl
    preview.style.display = 'block'
  }
}

第二种方式

使用 FileReader 将文件读取为 ArrayBuffer，创建 Blob URL，使用URL.createObjectURL(blob)生成临时的访问地址。

js 复制代码

function handleFileChange(event) {
  if (file) {
    const reader = new FileReader()
    reader.onload = function (e) {
      const preview = document.getElementById('preview')
      // 创建 Blob 对象，将二进制数据转换为 Blob
      const blob = new Blob([e.target.result], { type: 'image/jpeg' })

      // 生成 Blob URL
      preview.src = URL.createObjectURL(blob)
      preview.style.display = 'block'
    }
    // 转成二进制
    reader.readAsArrayBuffer(file)
  }
}

第三种方式

使用 FileReader 将文件读取为 base64，创建 Blob URL，使用URL.createObjectURL(blob)生成临时的访问地址。

js 复制代码

function handleFileChange(event) {
  if (file) {
    const reader = new FileReader()
    reader.onload = function (e) {
      const preview = document.getElementById('preview')
      preview.src = base64ToBlobUrl(base64Data)
      preview.style.display = 'block'
    }
    // 转成base64
    reader.readAsDataURL(file)
  }
}

//将base64转成Blob Url
function base64ToBlobUrl(base64Data: string | undefined) {
  if (!base64Data) {
    return ''
  }
  const base64String = base64Data.split(',')[1]

  // 解码 Base64 数据
  const binaryString = atob(base64String)
  const len = binaryString.length
  const bytes = new Uint8Array(len)

  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i)
  }

  // 创建 Blob 对象
  const blob = new Blob([bytes], { type: 'image/jpeg' })

  // 生成 Blob URL
  return URL.createObjectURL(blob)
}

最后重点，创建临时访问地址，记得要及时释放，不然会导致内存溢出。

js 复制代码

const blob = new Blob([file], { type: 'image/jpeg' })
const blobUrl = URL.createObjectURL(blob)

URL.revokeObjectURL(blobUrl)