选取本地文件selectFile
定义选取本地文件的方法selectFile:
/**
* 选取本地文件
* @param accept
* @param formatArr
*/
export function selectFile (accept, formatArr) {
return new Promise((resolve, reject) => {
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = accept
fileInput.click()
fileInput.onchange = function (event) {
const file = event.target.files[0]
if (!formatArr.includes(file.type)) {
reject({ message: false, event })
} else {
resolve({ message: true, event, file })
}
}
})
}
应用示例
:
选择图片,导入选取本地文件的方法selectFile并使用:
import { selectFile } from "./file.js"
// 导入图片
function importImg () {
const accept = '.png,.jpg,.jpeg'
const formatArr = ['image/png', 'image/jpg', 'image/jpeg']
selectFile(accept, formatArr).then(res => {
const file = res.file
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (e) {
const image = document.createElement('img')
image.setAttribute('src', e.target.result)
image.setAttribute('width', '100%')
image.setAttribute('height', '100%')
var imageDom = document.querySelector('#image')
imageDom.appendChild(image)
let imageBase64 = e.target.result
const reg = new RegExp(';base64')
imageBase64 = imageBase64.replace(reg, '')
console.log(imageBase64)
}
})
.catch(() => {
window.$message.error('仅支持' + accept + '格式的图片')
})
},
选择视频,导入选取本地文件的方法selectFile并使用:
import { selectFile } from "./file.js"
// 导入视频并自动播放
function importVideo () {
const accept = '.mp4'
const formatArr = ['video/mp4']
selectFile(accept, formatArr).then(res => {
const file = res.file
// console.log(file)
const blob = new Blob([file])
const url = URL.createObjectURL(blob)
const video = document.createElement('video')
video.style.background = 'black'
video.setAttribute('width', '100%')
video.setAttribute('height', '100%')
video.setAttribute('controls', 'ontrol')
const source = document.createElement('source')
source.setAttribute('src', url)
source.setAttribute('type', 'video/mp4')
video.appendChild(source)
var videoDom = document.querySelector('#video')
videoDom.appendChild(video)
video.play()
video.onload = function () {
URL.revokeObjectURL(this.src)
}
})
.catch(() => {
window.$message.error('仅支持' + accept + '格式的视频')
})
},