选取本地文件selectFile

选取本地文件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 + '格式的视频')
    })
},