123 lines
3.3 KiB
Vue
123 lines
3.3 KiB
Vue
<template>
|
||
<text :data="flag" :props="config" :change:data="fileManager.watchData" :change:props="fileManager.watchProps"></text>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 文件选择 - APP端
|
||
* @author sonve
|
||
* @version 1.0.0
|
||
* @date 2024-12-04
|
||
*/
|
||
|
||
export default {
|
||
props: {
|
||
/**
|
||
* 配置项
|
||
* @tutorial https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file
|
||
*/
|
||
config: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
accept: `.doc,.docx,.xls,.xlsx,.pdf,.zip,.rar,
|
||
application/msword,
|
||
application/vnd.openxmlformats-officedocument.wordprocessingml.document,
|
||
application/vnd.ms-excel,
|
||
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
|
||
application/pdf,
|
||
application/zip,
|
||
application/x-rar-compressed`,
|
||
multiple: false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
flag: 0 // 监听标志
|
||
}
|
||
},
|
||
methods: {
|
||
chooseFile() {
|
||
this.flag++ // 修改监听标志
|
||
},
|
||
rawFile(file) {
|
||
this.$emit('confirm', file)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script module="fileManager" lang="renderjs">
|
||
import { base64ToPath } from '../common/file-handler.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
configCopy: {}, // 跟随vue中props的配置
|
||
}
|
||
},
|
||
methods: {
|
||
watchData(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.openFileManager()
|
||
}
|
||
},
|
||
watchProps(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.configCopy = newValue
|
||
}
|
||
},
|
||
openFileManager() {
|
||
try {
|
||
const { accept, multiple } = this.configCopy
|
||
// 创建文件选择器input
|
||
let fileInput = document.createElement('input')
|
||
fileInput.setAttribute('type', 'file')
|
||
fileInput.setAttribute('accept', accept)
|
||
// 注：是否多选不要直接赋值multiple，应当是为false时不添加multiple属性
|
||
if(multiple) fileInput.setAttribute('multiple', multiple)
|
||
fileInput.click()
|
||
|
||
// 封装为Promise的FileReader读取文件
|
||
const readFileAsDataURL = (file) => {
|
||
return new Promise((resolve, reject) => {
|
||
let reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
|
||
reader.onload = async (event) => {
|
||
const base64 = event.target.result
|
||
const path = await base64ToPath(base64)
|
||
resolve({
|
||
name: file.name,
|
||
type: file.type,
|
||
size: file.size,
|
||
base64,
|
||
path
|
||
});
|
||
};
|
||
reader.onerror = (error) => {
|
||
reject(error);
|
||
};
|
||
});
|
||
}
|
||
|
||
fileInput.addEventListener('change', async (e) => {
|
||
let files = e.target.files // 注：此处为FileList对象，并非常规数组
|
||
|
||
let results = await Promise.all(
|
||
// Array.from 方法可以将类数组对象转换为真正的数组
|
||
Array.from(files).map(item => readFileAsDataURL(item))
|
||
);
|
||
|
||
// callMethod不支持流数据，无法直接传递文件流对象
|
||
this.$ownerInstance.callMethod('rawFile', results)
|
||
})
|
||
} catch (err) {
|
||
console.warn('==== openFileManager catch error :', err);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|