文件选择对话框添加后缀名过滤
This commit is contained in:
parent
740e831202
commit
2c5bed4304
|
@ -18,7 +18,7 @@
|
|||
"core-js": "^3.21.0",
|
||||
"element-resize-detector": "^1.2.4",
|
||||
"qrcode.vue": "^3.3.3",
|
||||
"quasar": "^2.7.1",
|
||||
"quasar": "^2.7.3",
|
||||
"reconnecting-websocket": "^4.4.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"to": "^0.2.9",
|
||||
|
|
|
@ -296,14 +296,16 @@
|
|||
<q-uploader
|
||||
ref="uploader"
|
||||
style="height: 69vh; width: 70%"
|
||||
:disable="uploader_loading"
|
||||
:url="getUrl"
|
||||
method="post"
|
||||
:headers="generatorFileUploadHeaders"
|
||||
:label="$t('select file') + ':'"
|
||||
accept="*"
|
||||
:accept="uploader_accept"
|
||||
@start="onStartUpload"
|
||||
@uploaded="onUploaded"
|
||||
@failed="onFailed"
|
||||
@added="/*onFileAdded*/ null"
|
||||
>
|
||||
</q-uploader>
|
||||
<q-space />
|
||||
|
@ -417,7 +419,15 @@ a:hover {
|
|||
</style>
|
||||
|
||||
<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 { useQuasar, date, copyToClipboard } from "quasar";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
@ -427,6 +437,7 @@ import FileEntity from "src/entities/FileEntity";
|
|||
import { HttpProtocol } from "src/entities/HttpProtocol";
|
||||
import NormalResult from "src/entities/NormalResult";
|
||||
import { Protocol } from "src/entities/WSProtocol";
|
||||
import FileSuffixHelper from "src/common/FileSuffixHelper";
|
||||
|
||||
class _BreadcrumbItem {
|
||||
name: string = "";
|
||||
|
@ -473,6 +484,8 @@ export default defineComponent({
|
|||
|
||||
let show_dialog = ref(false);
|
||||
let loading = ref(false);
|
||||
let uploader_loading = ref(false);
|
||||
let uploader_accept = ref("*");
|
||||
let uploading = ref(false);
|
||||
let files = ref(<FileEntity[]>[]);
|
||||
let show_context_menu = ref(false);
|
||||
|
@ -773,6 +786,8 @@ export default defineComponent({
|
|||
return {
|
||||
show_dialog,
|
||||
loading,
|
||||
uploader_loading,
|
||||
uploader_accept,
|
||||
uploading,
|
||||
files,
|
||||
columns,
|
||||
|
@ -795,18 +810,33 @@ export default defineComponent({
|
|||
refresh_file_list_async,
|
||||
status,
|
||||
filters,
|
||||
async showDialog(in_status: string, filter?: string) {
|
||||
status.value = in_status;
|
||||
parseFilter(filter);
|
||||
refresh_usb_devices();
|
||||
refresh_file_list();
|
||||
|
||||
show_dialog.value = true;
|
||||
},
|
||||
showDialogAsync(in_status: string, filter?: string) {
|
||||
showDialogAsync(
|
||||
in_status: string,
|
||||
no_filter = true,
|
||||
video_filter = false,
|
||||
image_filter = false
|
||||
) {
|
||||
return new Promise((_resolve, _reject) => {
|
||||
status.value = in_status;
|
||||
{
|
||||
let filter = "";
|
||||
if (!no_filter) {
|
||||
if (video_filter) {
|
||||
filter += FileSuffixHelper.videoSuffix;
|
||||
}
|
||||
if (image_filter) {
|
||||
filter += FileSuffixHelper.imageSuffix;
|
||||
}
|
||||
}
|
||||
parseFilter(filter);
|
||||
if (filter === "") {
|
||||
uploader_accept.value = "*";
|
||||
} else {
|
||||
uploader_accept.value = filter.replace(/;/g, ",");
|
||||
}
|
||||
console.log(filter);
|
||||
}
|
||||
|
||||
refresh_usb_devices();
|
||||
refresh_file_list();
|
||||
show_dialog.value = true;
|
||||
|
@ -1023,6 +1053,78 @@ export default defineComponent({
|
|||
onStartUpload() {
|
||||
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() {
|
||||
uploading.value = false;
|
||||
uploader.value.reset();
|
||||
|
|
|
@ -189,7 +189,9 @@ export default defineComponent({
|
|||
let result = "";
|
||||
const obj = await file_manage_dialog.value.showDialogAsync(
|
||||
"select",
|
||||
filter
|
||||
no_filter,
|
||||
video_filter,
|
||||
image_filter
|
||||
);
|
||||
if (obj) {
|
||||
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 {
|
||||
show_dialog,
|
||||
|
@ -222,12 +226,19 @@ export default defineComponent({
|
|||
|
||||
addRow,
|
||||
|
||||
showDialogAsync(options: any, _filter?: string) {
|
||||
showDialogAsync(
|
||||
options: any,
|
||||
_no_filter = true,
|
||||
_video_filter = false,
|
||||
_image_filter = false
|
||||
) {
|
||||
if (_resolove) {
|
||||
_resolove();
|
||||
_resolove = null;
|
||||
}
|
||||
filter = _filter;
|
||||
no_filter = _no_filter;
|
||||
video_filter = _video_filter;
|
||||
image_filter = _image_filter;
|
||||
initialize_properties(options);
|
||||
if (play_list.value.length == 0) {
|
||||
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"))) {
|
||||
return;
|
||||
}
|
||||
const obj = await file_manage_dialog.value.showDialogAsync(
|
||||
"select",
|
||||
filter
|
||||
no_filter,
|
||||
video_filter,
|
||||
image_filter
|
||||
);
|
||||
if (obj) {
|
||||
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") {
|
||||
return;
|
||||
}
|
||||
const result = await playlist_dialog.value.showDialogAsync(
|
||||
item_data.media_url,
|
||||
filter
|
||||
no_filter,
|
||||
video_filter,
|
||||
false
|
||||
);
|
||||
if (Array.isArray(result)) {
|
||||
if (result.length) {
|
||||
|
@ -642,19 +653,20 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
async showVideoPlayListDialog() {
|
||||
return showPlaylistDialog(FileSuffixHelper.videoSuffix);
|
||||
return showPlaylistDialog(false, true);
|
||||
},
|
||||
async showPlaylistDialog(filter: string) {
|
||||
return showPlaylistDialog(filter);
|
||||
async showPlaylistDialog(no_filter = true, video_filter = false) {
|
||||
return showPlaylistDialog(no_filter, video_filter);
|
||||
},
|
||||
async doSelectImageFile() {
|
||||
return doSelectFile(
|
||||
GlobalData.getInstance().applicationConfig?.image_suffix_filter ||
|
||||
".jpg;.png"
|
||||
);
|
||||
return doSelectFile(false, false, true);
|
||||
},
|
||||
async doSelectFile(filter: string) {
|
||||
return doSelectFile(filter);
|
||||
async doSelectFile(
|
||||
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(
|
||||
v
|
||||
)) ||
|
||||
$t('zzzzz'),
|
||||
$t('time format error'),
|
||||
]"
|
||||
lazy-rules
|
||||
:hint="
|
||||
|
|
|
@ -5,6 +5,7 @@ export namespace HttpProtocol {
|
|||
export const RequestPathDBBackup = "/db_backup";
|
||||
export const RequestPathListFile = "/list_file";
|
||||
export const RequestPathCreateDirectory = "/create_directory";
|
||||
export const RequestPathCheckFileSupport = "/check_file_support";
|
||||
export const RequestPathDeleteFile = "/delete_file";
|
||||
export const RequestPathRenameFile = "/rename_file";
|
||||
export const RequestCheckModeIndex = "/check_mode_index";
|
||||
|
|
|
@ -582,4 +582,6 @@ export default {
|
|||
"客户端依赖Cookie功能。如果当前浏览器未启用Cookie,则客户端无法使用!",
|
||||
"Please refresh this page after cookies are enabled":
|
||||
"请在开启Cookie功能后刷新该页面",
|
||||
"load file error": "文件加载错误",
|
||||
"time format error": "时间格式错误",
|
||||
};
|
||||
|
|
|
@ -995,7 +995,9 @@ export default defineComponent({
|
|||
if (old_signal_source) {
|
||||
const obj = await file_manage_dialog.value.showDialogAsync(
|
||||
"select",
|
||||
FileSuffixHelper.allSuffix
|
||||
false,
|
||||
true,
|
||||
true
|
||||
);
|
||||
if (obj) {
|
||||
interface __I {
|
||||
|
@ -1102,7 +1104,9 @@ export default defineComponent({
|
|||
|
||||
const obj = await file_manage_dialog.value.showDialogAsync(
|
||||
"select",
|
||||
FileSuffixHelper.allSuffix
|
||||
false,
|
||||
true.valueOf,
|
||||
true
|
||||
);
|
||||
|
||||
if (obj) {
|
||||
|
|
|
@ -169,7 +169,7 @@
|
|||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="$refs.file_manage_dialog.showDialog()"
|
||||
@click="$refs.file_manage_dialog.showDialogAsync()"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="img:pad/toolbar/file_upload_icon.png" />
|
||||
|
|
|
@ -90,7 +90,7 @@
|
|||
:icon="/*description*/ 'img:new_icon/file_manager.png'"
|
||||
:label="$t('file manage')"
|
||||
class="q-mr-sm"
|
||||
@click="$refs.file_manage_dialog.showDialog()"
|
||||
@click="$refs.file_manage_dialog.showDialogAsync()"
|
||||
/>
|
||||
<q-btn
|
||||
stretch
|
||||
|
|
|
@ -1103,7 +1103,9 @@ export default defineComponent({
|
|||
|
||||
const obj = await file_manage_dialog.value.showDialogAsync(
|
||||
"select",
|
||||
FileSuffixHelper.allSuffix
|
||||
false,
|
||||
true,
|
||||
true
|
||||
);
|
||||
if (obj) {
|
||||
interface __I {
|
||||
|
@ -1188,7 +1190,9 @@ export default defineComponent({
|
|||
if (old_signal_source) {
|
||||
const obj = await file_manage_dialog.value.showDialogAsync(
|
||||
"select",
|
||||
FileSuffixHelper.allSuffix
|
||||
false,
|
||||
true,
|
||||
true
|
||||
);
|
||||
if (obj) {
|
||||
interface __I {
|
||||
|
|
|
@ -8893,10 +8893,10 @@ qs@6.9.6:
|
|||
resolved "https://registry.npmmirror.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
|
||||
integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
|
||||
|
||||
quasar@^2.7.1:
|
||||
version "2.7.1"
|
||||
resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.1.tgz#a599978ce2f1f6327e6686a01923ccacd9a75ddd"
|
||||
integrity sha512-V2FcD04nHE07p4p0YEeC3ZIA9kodyZ5wdZ+eXRZhUZ3cFugAneJ1D2WCyKoqwM4OReFCk/1jlqQxCCUaTU4X3g==
|
||||
quasar@^2.7.3:
|
||||
version "2.7.3"
|
||||
resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.3.tgz#ff57ac5f3c9a8fdc345f59362d7b0f45c80bc68d"
|
||||
integrity sha512-4YQQP1FbfshXwav9QcOHpvSg4eME4iKzd85m4562EqcfuhRtycC/2WQg+cRxlEr43gEHM0uXaJmybNUWZpoYkw==
|
||||
|
||||
query-string@^5.0.1:
|
||||
version "5.1.1"
|
||||
|
|
Loading…
Reference in New Issue