Saber2pr's Blog

上传和发送图片

上传图片属于文件上传,即利用 input:file。

<input type="file" multiple onChange="callback" />

multiple 表示可多选上传。但仅 IOS 系统有效。

onChange 处理文件

const onChange = e => {
  const files = e.target.files
  Promise.all(
    Array.from(files).map(file =>
      readFile(file).then(base64Str => axios.post("xxx", { body: base64Str }))
    )
  )
}

files 的类型是 FileList,是伪数组。

readFile 是 FileReader 的封装

const readFile = (file: File) =>
  new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.addEventListener("load", () => resolve(reader.result.toString()))
    reader.addEventListener("error", () => reject(reader.result))
  })