上传图片属于文件上传,即利用 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))
})