文件选择对话框添加后缀名过滤

This commit is contained in:
fangxiang 2022-06-21 15:23:40 +08:00
parent 740e831202
commit 2c5bed4304
12 changed files with 177 additions and 41 deletions

View File

@ -18,7 +18,7 @@
"core-js": "^3.21.0", "core-js": "^3.21.0",
"element-resize-detector": "^1.2.4", "element-resize-detector": "^1.2.4",
"qrcode.vue": "^3.3.3", "qrcode.vue": "^3.3.3",
"quasar": "^2.7.1", "quasar": "^2.7.3",
"reconnecting-websocket": "^4.4.0", "reconnecting-websocket": "^4.4.0",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"to": "^0.2.9", "to": "^0.2.9",

View File

@ -296,14 +296,16 @@
<q-uploader <q-uploader
ref="uploader" ref="uploader"
style="height: 69vh; width: 70%" style="height: 69vh; width: 70%"
:disable="uploader_loading"
:url="getUrl" :url="getUrl"
method="post" method="post"
:headers="generatorFileUploadHeaders" :headers="generatorFileUploadHeaders"
:label="$t('select file') + ':'" :label="$t('select file') + ':'"
accept="*" :accept="uploader_accept"
@start="onStartUpload" @start="onStartUpload"
@uploaded="onUploaded" @uploaded="onUploaded"
@failed="onFailed" @failed="onFailed"
@added="/*onFileAdded*/ null"
> >
</q-uploader> </q-uploader>
<q-space /> <q-space />
@ -417,7 +419,15 @@ a:hover {
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, Ref, reactive, watch, computed } from "vue"; import {
defineComponent,
ref,
Ref,
reactive,
watch,
computed,
nextTick,
} from "vue";
import { useStore } from "src/store"; import { useStore } from "src/store";
import { useQuasar, date, copyToClipboard } from "quasar"; import { useQuasar, date, copyToClipboard } from "quasar";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@ -427,6 +437,7 @@ import FileEntity from "src/entities/FileEntity";
import { HttpProtocol } from "src/entities/HttpProtocol"; import { HttpProtocol } from "src/entities/HttpProtocol";
import NormalResult from "src/entities/NormalResult"; import NormalResult from "src/entities/NormalResult";
import { Protocol } from "src/entities/WSProtocol"; import { Protocol } from "src/entities/WSProtocol";
import FileSuffixHelper from "src/common/FileSuffixHelper";
class _BreadcrumbItem { class _BreadcrumbItem {
name: string = ""; name: string = "";
@ -473,6 +484,8 @@ export default defineComponent({
let show_dialog = ref(false); let show_dialog = ref(false);
let loading = ref(false); let loading = ref(false);
let uploader_loading = ref(false);
let uploader_accept = ref("*");
let uploading = ref(false); let uploading = ref(false);
let files = ref(<FileEntity[]>[]); let files = ref(<FileEntity[]>[]);
let show_context_menu = ref(false); let show_context_menu = ref(false);
@ -773,6 +786,8 @@ export default defineComponent({
return { return {
show_dialog, show_dialog,
loading, loading,
uploader_loading,
uploader_accept,
uploading, uploading,
files, files,
columns, columns,
@ -795,18 +810,33 @@ export default defineComponent({
refresh_file_list_async, refresh_file_list_async,
status, status,
filters, filters,
async showDialog(in_status: string, filter?: string) { showDialogAsync(
status.value = in_status; in_status: string,
parseFilter(filter); no_filter = true,
refresh_usb_devices(); video_filter = false,
refresh_file_list(); image_filter = false
) {
show_dialog.value = true;
},
showDialogAsync(in_status: string, filter?: string) {
return new Promise((_resolve, _reject) => { return new Promise((_resolve, _reject) => {
status.value = in_status; status.value = in_status;
{
let filter = "";
if (!no_filter) {
if (video_filter) {
filter += FileSuffixHelper.videoSuffix;
}
if (image_filter) {
filter += FileSuffixHelper.imageSuffix;
}
}
parseFilter(filter); parseFilter(filter);
if (filter === "") {
uploader_accept.value = "*";
} else {
uploader_accept.value = filter.replace(/;/g, ",");
}
console.log(filter);
}
refresh_usb_devices(); refresh_usb_devices();
refresh_file_list(); refresh_file_list();
show_dialog.value = true; show_dialog.value = true;
@ -1023,6 +1053,78 @@ export default defineComponent({
onStartUpload() { onStartUpload() {
loading.value = true; loading.value = true;
}, },
async onFileAdded(files: File[] | File) {
setTimeout(async () => {
const onError = async (file: File | null) => {
await nextTick(() => {});
uploader.value.reset();
$q.notify({
color: "negative",
icon: "warning",
message: $t.t("load file error") + "!",
position: "top",
timeout: 3000,
});
};
let file: File | null = null;
try {
if (Array.isArray(files)) {
if (files.length > 0) {
file = files[0];
}
} else {
file = files;
}
if (file) {
const file_name = file.name;
const blob = file.slice(0, 1024 * 1024 * 1); // 1 MB
uploader_loading.value = true;
try {
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = HttpProtocol.RequestPathCheckFileSupport;
// if (FileSuffixHelper.isVideoPath(file_name)) {
// }
const data = new FormData();
data.append(
"file",
new File([blob], file_name, {
lastModified: file.lastModified,
})
);
const response = await api.post(url.toString(), data, {
headers: {
"Content-Type": "multipart/form-data",
},
});
if (response && response.data && response.data.is_support) {
} else {
onError(file);
}
console.log(response);
} else {
throw "";
}
} catch (e) {
console.error(e);
onError(file);
}
uploader_loading.value = false;
return;
}
} catch (e) {
console.error(e);
onError(file);
}
}, 1);
},
onUploaded() { onUploaded() {
uploading.value = false; uploading.value = false;
uploader.value.reset(); uploader.value.reset();

View File

@ -189,7 +189,9 @@ export default defineComponent({
let result = ""; let result = "";
const obj = await file_manage_dialog.value.showDialogAsync( const obj = await file_manage_dialog.value.showDialogAsync(
"select", "select",
filter no_filter,
video_filter,
image_filter
); );
if (obj) { if (obj) {
interface __I { interface __I {
@ -212,7 +214,9 @@ export default defineComponent({
} }
}; };
let filter: string | undefined = ""; let no_filter = true;
let video_filter = false;
let image_filter = false;
return { return {
show_dialog, show_dialog,
@ -222,12 +226,19 @@ export default defineComponent({
addRow, addRow,
showDialogAsync(options: any, _filter?: string) { showDialogAsync(
options: any,
_no_filter = true,
_video_filter = false,
_image_filter = false
) {
if (_resolove) { if (_resolove) {
_resolove(); _resolove();
_resolove = null; _resolove = null;
} }
filter = _filter; no_filter = _no_filter;
video_filter = _video_filter;
image_filter = _image_filter;
initialize_properties(options); initialize_properties(options);
if (play_list.value.length == 0) { if (play_list.value.length == 0) {
addRow(); addRow();

View File

@ -485,13 +485,19 @@ export default defineComponent({
} }
}; };
const doSelectFile = async (filter: string) => { const doSelectFile = async (
no_filter = true,
video_filter = false,
image_filter = false
) => {
if (!media_url_label.value.startsWith($t.t("file path"))) { if (!media_url_label.value.startsWith($t.t("file path"))) {
return; return;
} }
const obj = await file_manage_dialog.value.showDialogAsync( const obj = await file_manage_dialog.value.showDialogAsync(
"select", "select",
filter no_filter,
video_filter,
image_filter
); );
if (obj) { if (obj) {
interface __I { interface __I {
@ -515,13 +521,18 @@ export default defineComponent({
} }
}; };
const showPlaylistDialog = async (filter: string | null) => { const showPlaylistDialog = async (
no_filter = true,
video_filter = false
) => {
if (item_data.window_type != "EwindowType::Multimedia") { if (item_data.window_type != "EwindowType::Multimedia") {
return; return;
} }
const result = await playlist_dialog.value.showDialogAsync( const result = await playlist_dialog.value.showDialogAsync(
item_data.media_url, item_data.media_url,
filter no_filter,
video_filter,
false
); );
if (Array.isArray(result)) { if (Array.isArray(result)) {
if (result.length) { if (result.length) {
@ -642,19 +653,20 @@ export default defineComponent({
} }
}, },
async showVideoPlayListDialog() { async showVideoPlayListDialog() {
return showPlaylistDialog(FileSuffixHelper.videoSuffix); return showPlaylistDialog(false, true);
}, },
async showPlaylistDialog(filter: string) { async showPlaylistDialog(no_filter = true, video_filter = false) {
return showPlaylistDialog(filter); return showPlaylistDialog(no_filter, video_filter);
}, },
async doSelectImageFile() { async doSelectImageFile() {
return doSelectFile( return doSelectFile(false, false, true);
GlobalData.getInstance().applicationConfig?.image_suffix_filter ||
".jpg;.png"
);
}, },
async doSelectFile(filter: string) { async doSelectFile(
return doSelectFile(filter); no_filter = true,
video_filter = false,
image_filter = false
) {
return doSelectFile(no_filter, video_filter, image_filter);
}, },
}; };
}, },

View File

@ -125,7 +125,7 @@
/^(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})$/.test( /^(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})$/.test(
v v
)) || )) ||
$t('zzzzz'), $t('time format error'),
]" ]"
lazy-rules lazy-rules
:hint=" :hint="

View File

@ -5,6 +5,7 @@ export namespace HttpProtocol {
export const RequestPathDBBackup = "/db_backup"; export const RequestPathDBBackup = "/db_backup";
export const RequestPathListFile = "/list_file"; export const RequestPathListFile = "/list_file";
export const RequestPathCreateDirectory = "/create_directory"; export const RequestPathCreateDirectory = "/create_directory";
export const RequestPathCheckFileSupport = "/check_file_support";
export const RequestPathDeleteFile = "/delete_file"; export const RequestPathDeleteFile = "/delete_file";
export const RequestPathRenameFile = "/rename_file"; export const RequestPathRenameFile = "/rename_file";
export const RequestCheckModeIndex = "/check_mode_index"; export const RequestCheckModeIndex = "/check_mode_index";

View File

@ -582,4 +582,6 @@ export default {
"客户端依赖Cookie功能。如果当前浏览器未启用Cookie则客户端无法使用!", "客户端依赖Cookie功能。如果当前浏览器未启用Cookie则客户端无法使用!",
"Please refresh this page after cookies are enabled": "Please refresh this page after cookies are enabled":
"请在开启Cookie功能后刷新该页面", "请在开启Cookie功能后刷新该页面",
"load file error": "文件加载错误",
"time format error": "时间格式错误",
}; };

View File

@ -995,7 +995,9 @@ export default defineComponent({
if (old_signal_source) { if (old_signal_source) {
const obj = await file_manage_dialog.value.showDialogAsync( const obj = await file_manage_dialog.value.showDialogAsync(
"select", "select",
FileSuffixHelper.allSuffix false,
true,
true
); );
if (obj) { if (obj) {
interface __I { interface __I {
@ -1102,7 +1104,9 @@ export default defineComponent({
const obj = await file_manage_dialog.value.showDialogAsync( const obj = await file_manage_dialog.value.showDialogAsync(
"select", "select",
FileSuffixHelper.allSuffix false,
true.valueOf,
true
); );
if (obj) { if (obj) {

View File

@ -169,7 +169,7 @@
<q-item <q-item
clickable clickable
v-close-popup v-close-popup
@click="$refs.file_manage_dialog.showDialog()" @click="$refs.file_manage_dialog.showDialogAsync()"
> >
<q-item-section avatar> <q-item-section avatar>
<q-icon name="img:pad/toolbar/file_upload_icon.png" /> <q-icon name="img:pad/toolbar/file_upload_icon.png" />

View File

@ -90,7 +90,7 @@
:icon="/*description*/ 'img:new_icon/file_manager.png'" :icon="/*description*/ 'img:new_icon/file_manager.png'"
:label="$t('file manage')" :label="$t('file manage')"
class="q-mr-sm" class="q-mr-sm"
@click="$refs.file_manage_dialog.showDialog()" @click="$refs.file_manage_dialog.showDialogAsync()"
/> />
<q-btn <q-btn
stretch stretch

View File

@ -1103,7 +1103,9 @@ export default defineComponent({
const obj = await file_manage_dialog.value.showDialogAsync( const obj = await file_manage_dialog.value.showDialogAsync(
"select", "select",
FileSuffixHelper.allSuffix false,
true,
true
); );
if (obj) { if (obj) {
interface __I { interface __I {
@ -1188,7 +1190,9 @@ export default defineComponent({
if (old_signal_source) { if (old_signal_source) {
const obj = await file_manage_dialog.value.showDialogAsync( const obj = await file_manage_dialog.value.showDialogAsync(
"select", "select",
FileSuffixHelper.allSuffix false,
true,
true
); );
if (obj) { if (obj) {
interface __I { interface __I {

View File

@ -8893,10 +8893,10 @@ qs@6.9.6:
resolved "https://registry.npmmirror.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee" resolved "https://registry.npmmirror.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ== integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
quasar@^2.7.1: quasar@^2.7.3:
version "2.7.1" version "2.7.3"
resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.1.tgz#a599978ce2f1f6327e6686a01923ccacd9a75ddd" resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.3.tgz#ff57ac5f3c9a8fdc345f59362d7b0f45c80bc68d"
integrity sha512-V2FcD04nHE07p4p0YEeC3ZIA9kodyZ5wdZ+eXRZhUZ3cFugAneJ1D2WCyKoqwM4OReFCk/1jlqQxCCUaTU4X3g== integrity sha512-4YQQP1FbfshXwav9QcOHpvSg4eME4iKzd85m4562EqcfuhRtycC/2WQg+cRxlEr43gEHM0uXaJmybNUWZpoYkw==
query-string@^5.0.1: query-string@^5.0.1:
version "5.1.1" version "5.1.1"