文件选择对话框添加后缀名过滤
This commit is contained in:
parent
740e831202
commit
2c5bed4304
|
@ -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",
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -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="
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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": "时间格式错误",
|
||||||
};
|
};
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue