/**
* 1. 如何实例化 const fileInput = await FileInput.init(fileInputEle, isMulFile)
*/
export class FileInput {
files = null
isMulFile = false
_isInit = false
constructor(_isInit, isMulFile, files) {
if (!_isInit) {
throw `FileInput 只能调用 init 方法实例化`
}
this.isMulFile = isMulFile
this.files = files
}
get file () {
const files = this.files
if (!files || files.length === 0) return null
return files[0]
}
static init(fileInputEle, isMulFile) {
return new Promise((resolve, reject) => {
fileInputEle.addEventListener(
'change',
function (e) {
this.files = e.target.files
const fileinput = new FileInput(true, isMulFile, files)
resolve(fileinput)
},
false
)
})
}
/**
* getBase64ByCb 和 getAndCreateObjectURL 没有封装私有索性，原因：
* 1. js 中没有保护属性，只能用静态属性来替代
* 2. FileInput 默认是针对单文件，需要扩展多文件的处理，所以保留这个两个方法
* 3. 多文件的处理，需要增加一个类 MulFileInput
*/
// 面向开发者的方法的命名
static _getBase64ByCb(file, cb) {
var reader = new FileReader()
if (file) {
// 图片base64
reader.readAsDataURL(file)
reader.onload = function (e) {
var base64 = reader.result
cb && cb(base64)
}
}
}
static _getAndCreateObjectURL = function (blob) {
if (window.URL) {
return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
// 面向使用者的方法命名
getFileUrl () {
return FileInput._getAndCreateObjectURL(this.file)
}
getSizeTypeNameObj () {
const file = this.file
const obj = {}
obj.name = file.name
obj.type = file.type
obj.size = file.size
return obj
}
getBase64 () {
const file = this.file
return new Promise((resolve, reject) => {
FileInput._getBase64ByCb(file, function (base64) {
resolve(base64)
})
})
}
// 去掉base64头
getDelStartBase64(base64) {
const newBase64 = replace(/data\:(.*?);base64\,/, '')
return newBase64
}
async getFileObj () {
const obj = this.getSizeTypeNameObj()
const base64 = await getBase64()
Object.assign(obj, {
base64
})
return obj
}
}