上传相同文件有bug

This commit is contained in:
2026-01-23 21:13:43 +08:00
parent d52ba97147
commit 2ab794a0e3
3 changed files with 180 additions and 125 deletions
@@ -1,83 +1,85 @@
<script setup>
import { onMounted, ref, watch, defineProps,reactive } from "vue";
import { onMounted, ref, watch, defineProps, reactive } from "vue";
import flatpickr from "flatpickr";
import 'flatpickr/dist/flatpickr.css';
import 'flatpickr/dist/l10n/zh.js';
import "flatpickr/dist/flatpickr.css";
import "flatpickr/dist/l10n/zh.js";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const datatimepack = ref();
const datatimepack=ref()
const datatimepack_config=reactive({
enableTime: true,
dateFormat: "Y-m-d H:i",
minuteIncrement:1,
time_24hr: true
//locale:"zh"
})
const sele_data=reactive()
function getCurrentDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
watch(locale, () => {
if(locale.value=="zh-CN"){
datatimepack_config.locale='zh'
}else{
datatimepack_config.locale='en'
}
//console.log(locale.value=="zh-CN"?"zh":"en")
});
const prop= defineProps({
const prop = defineProps({
setdef: {
type: String,
default: "",
},
max_date: {
type: [String, Date, Function],
default: () => new Date(), // 默认值为当前时间
},
});
const datatimepack_config = reactive({
enableTime: true,
dateFormat: "Y-m-d H:i",
minuteIncrement: 1,
time_24hr: true,
maxDate: prop.max_date, // 只能选择当前时间之前的时间
//locale:"zh"
});
const sele_data = reactive();
function getCurrentDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
watch(locale, () => {
if (locale.value == "zh-CN") {
datatimepack_config.locale = "zh";
} else {
datatimepack_config.locale = "en";
}
//console.log(locale.value=="zh-CN"?"zh":"en")
});
onMounted(() => {
// @formatter:off
//console.log(getCurrentDateTime())
//sele_data=getCurrentDateTime();
// console.log(prop.setdef)
// console.log(prop.setdef)
if(prop.setdef=="")
{
datatimepack_config.defaultDate=getCurrentDateTime()
}else{
datatimepack_config.defaultDate=prop.setdef
if (prop.setdef == "") {
datatimepack_config.defaultDate = getCurrentDateTime();
} else {
datatimepack_config.defaultDate = prop.setdef;
}
datatimepack_config.locale=locale.value=="zh-CN"?"zh":"en";
datatimepack_config.locale = locale.value == "zh-CN" ? "zh" : "en";
flatpickr(datatimepack.value, datatimepack_config);
});
defineExpose({
});
defineExpose({});
</script>
<template>
<div ></div>
<input ref="datatimepack" type="datetime-local" class="form-control" v-model="sele_data">
<div></div>
<input
ref="datatimepack"
type="datetime-local"
class="form-control"
v-model="sele_data"
/>
</template>
@@ -13,27 +13,27 @@ const lightbox = new FsLightbox();
const userStore = useUserStore();
const dropzoneElement = ref(null);
let dropzoneInstance = null;
var dropzoneInstance = null;
const files = reactive([]);
function get_file_from_uuid(uuid) {
if (files.length != 0) {
for(let i=0;i<files.length;i++){
if(files[i].uuid==uuid){
for (var i = 0; i < files.length; i++) {
if (files[i].uuid == uuid) {
return i;
}
}
}
return -1;
}
return -1;
}
return -2;
}
function remove_file_from_uuie(uuid) {
//delete files[uuid]
var id=get_file_from_uuid(uuid)
if(id>=0){
files.splice(id, 1)
//devare files[uuid]
var id = get_file_from_uuid(uuid);
if (id >= 0) {
files.splice(id, 1);
}
}
@@ -87,12 +87,12 @@ const initDropzone = () => {
//addRemoveLinks: true, // 显示移除链接
dictDefaultMessage: t("dropzone.upload_drop_or_click"),
dictFallbackMessage: t("dropzone.upload_browser_not_supported"),
dictFileTooBig:
dictFivarooBig:
t("dropzone.upload_file_too_big") +
"({{filesize}}MB). " +
t("dropzone.upload_max_file_size") +
"{{maxFilesize}}MB.",
dictInvalidFileType: t("dropzone.upload_invalid_file_type"),
dictInvalidFivarype: t("dropzone.upload_invalid_file_type"),
dictResponseError: t("dropzone.upload_server_error") + "{{statusCode}}",
//dictCancelUpload: t('dropzone.upload_cancel'),
//dictUploadCanceled: t('dropzone.upload_canceled'),
@@ -106,28 +106,28 @@ const initDropzone = () => {
// 事件处理
init: function () {
this.on("success", (file, response) => {
console.log("上传成功:", file, response);
//console.log("上传成功:", file, response);
file.previewElement.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
// 处理点击事件
console.log("缩略图被点击", file);
//console.log("缩略图被点击", file);
//动态把文件载入灯箱
//先移除原有数据
lightbox.props.sources.splice(0,lightbox.props.sources.length)
lightbox.props.sources.splice(0, lightbox.props.sources.length);
var dis_id=0;
var dis_id_t=0;
for (let i=0;i<files.length;i++){
if(files[i]["is_upload"]==true){
lightbox.props.sources.push(files[i]["get_url"])
if(files[i]["uuid"]==file.upload.uuid){
dis_id=dis_id_t;
var dis_id = 0;
var dis_id_t = 0;
for (var i = 0; i < files.length; i++) {
if (files[i]["is_upload"] == true) {
lightbox.props.sources.push(files[i]["get_url"]);
if (files[i]["uuid"] == file.upload.uuid) {
dis_id = dis_id_t;
}
}
dis_id_t+=1;
dis_id_t += 1;
}
lightbox.open(dis_id);
@@ -148,18 +148,17 @@ const initDropzone = () => {
// size: file.size,
// };
var file_id=get_file_from_uuid(file.upload.uuid)
if(file_id>=0)
{
files[file_id]["hash"]=response.return.hash;
files[file_id]["get_url"]=response.return.get;
files[file_id]["download_url"]=response.return.download;
files[file_id]["file_name"]=file.name;
files[file_id]["file_size"]=file.size;
var file_id = get_file_from_uuid(file.upload.uuid);
if (file_id >= 0) {
files[file_id]["hash"] = response.return.hash;
files[file_id]["get_url"] = response.return.get;
files[file_id]["download_url"] = response.return.download;
files[file_id]["file_name"] = file.name;
files[file_id]["file_size"] = file.size;
files[file_id]["is_upload"]=true;
files[file_id]["is_upload"] = true;
console.log(files)
//console.log(files)
}
//files.push(t)
@@ -173,21 +172,30 @@ const initDropzone = () => {
console.error("上传失败:", file.name, errorMessage);
});
this.on("removedfile", (file) => {
console.log("remove:", file);
//console.log("remove:", file);
//files.value = files.value.filter(f => f.name !== file.name)
remove_file_from_uuie(file.upload.uuid)
console.log(files)
remove_file_from_uuie(file.upload.uuid);
//console.log(files)
});
this.on("addedfile", (file) => {
//添加文件
console.log("addfile", file);
//控制排序 需要从添加文件开始操作
var t = {
uuid: file.upload.uuid,
is_upload: false,
};
files.push(t);
console.log(files);
console.log(get_file_from_uuid(file.upload.uuid));
//判断文件是否重复
if (get_file_from_uuid(file.upload.uuid) <0) {
// //控制排序 需要从添加文件开始操作
var t = {
uuid: file.upload.uuid,
is_upload: false,
};
files.push(t);
console.log(files);
return;
}
//this.removeFile(file)
});
this.on("sending", function (file, xhr, formData) {
// 获取表单值并添加到 FormData
@@ -229,6 +237,10 @@ const initDropzone = () => {
// }
// }
function return_files() {
return files;
}
// 组件挂载时初始化
onMounted(() => {
initDropzone();
@@ -242,6 +254,10 @@ onUnmounted(() => {
dropzoneInstance.destroy();
}
});
defineExpose({
return_files,
});
</script>
<template>
@@ -310,15 +326,8 @@ onUnmounted(() => {
<!-- 移除按钮 -->
</div>
</div>
<div class="text-end">{{ files.length }}/{{ maxFiles }}</div>
<div ref="dropzoneElement" class="dropzone"></div>
<!-- <div v-if="files.length > 0" class="mt-4">
<h3>已选择的文件</h3>
<ul>
<li v-for="file in files" :key="file.name">
{{ file.name }} ({{ formatBytes(file.size) }})
</li>
</ul>
</div> -->
</div>
</template>
@@ -2,6 +2,8 @@
import { onMounted, watch, ref, reactive } from "vue";
import { useI18n } from "vue-i18n";
import MyOffcanvas from "@/components/MyOffcanvas.vue";
import tagadder from "@/components/tagadder.vue";
import dateTimePicker from "@/components/dateTimePicker.vue";
@@ -18,7 +20,12 @@ import "tom-select/dist/css/tom-select.css";
const textarea_maxlen = 256;
const textarea_len = ref(0);
const textarea_val = ref();
const title_input_dom = ref();
const photos_hash = ref();
const mos = ref();
const { t, locale } = useI18n();
@@ -44,7 +51,7 @@ const order_status = reactive({
1: t("order_status.pending_order"),
2: t("order_status.order_placed"),
3: t("order_status.in_transit"),
4: t("order_status.completed"),
4: t("order_status.compvared"),
5: t("order_status.refund_requested"),
6: t("order_status.returning"),
7: t("order_status.refunded"),
@@ -55,7 +62,7 @@ function update_order_status() {
order_status["1"] = t("order_status.pending_order");
order_status["2"] = t("order_status.order_placed");
order_status["3"] = t("order_status.in_transit");
order_status["4"] = t("order_status.completed");
order_status["4"] = t("order_status.compvared");
order_status["5"] = t("order_status.refund_requested");
order_status["6"] = t("order_status.returning");
order_status["7"] = t("order_status.refunded");
@@ -86,19 +93,50 @@ function add_cost() {
//console.log(t);
}
const submit_sheet = reactive({
title: "",
remark: "",
photos: [],
link: "",
part_name: "",
styles: [],
costs: [],
update_time: "",
tracking_number: "",
order_status: "1",
});
function submit_order() {
console.log("up");
if (submit_sheet.title == "") {
title_input_dom.value.classList.add("is-invalid");
title_input_dom.value.addEventListener("input", function () {
if (this.value.trim() !== "") {
this.classList.remove("is-invalid");
//this.removeEventListener('input');
}
});
mos.value?.showAlert("danger", t("purchase_addorder.title"), 1000);
return;
}
//载入图片哈希列表
var photos = photos_hash.value.return_files();
for (var i = 0; i < photos.length; i++) {
submit_sheet.photos.push(photos[i].hash);
}
console.log(submit_sheet);
}
function textarea_change(a) {
//console.log(textarea_val.value.length)
textarea_len.value = textarea_val.value.length;
textarea_len.value = submit_sheet.remark.length;
// if(a.inputType=="insertText"){
// textarea_len.value+=1;
// }
// if(a.inputType=="deleteContentBackward"){
// if(a.inputType=="devareContentBackward"){
// textarea_len.value-=1;
// }
}
@@ -132,7 +170,7 @@ watch(
cost_sheet.cost = parseFloat(fixed);
}
}
}
},
);
</script>
@@ -166,6 +204,8 @@ watch(
class="form-control"
name="example-text-input"
:placeholder="t('purchase_addorder.title')"
v-model="submit_sheet.title"
ref="title_input_dom"
/>
</div>
<div class="mb-3">
@@ -182,12 +222,13 @@ watch(
:placeholder="t('purchase_addorder.remarks_text')"
:maxlength="textarea_maxlen"
@input="textarea_change"
v-model="textarea_val"
v-model="submit_sheet.remark"
></textarea>
<useDropzone
acceptedFiles="image/*"
uploadURL="/api/files/upload/image"
maxFiles="10"
ref="photos_hash"
></useDropzone>
</div>
</div>
@@ -202,13 +243,13 @@ watch(
<label class="form-label">{{
t("purchase_addorder.link")
}}</label>
<input
<textarea
name="url"
type="url"
class="form-control"
placeholder="http"
value=""
/>
v-model="submit_sheet.link"
></textarea>
<div class="mb-3 mt-3">
<label class="form-label">{{
t("purchase_addorder.part_name")
@@ -218,6 +259,7 @@ watch(
class="form-control"
name="example-text-input"
:placeholder="t('purchase_addorder.part_name')"
v-model="submit_sheet.part_name"
/>
</div>
<div class="mt-3">
@@ -289,7 +331,7 @@ watch(
<select
ref="select_type"
class="form-control"
autocomplete="off"
autocompvare="off"
value="1"
v-model="cost_sheet.type"
>
@@ -324,7 +366,7 @@ watch(
<select
ref="select_beast"
class="form-control"
autocomplete="off"
autocompvare="off"
value="1"
v-model="cost_sheet.currency_type"
>
@@ -374,7 +416,7 @@ watch(
:placeholder="
t('purchase_addorder.input_tracking_number')
"
value=""
v-model="submit_sheet.tracking_number"
/>
</div>
<div class="col-xl-4">
@@ -382,8 +424,8 @@ watch(
<select
ref="select_beast"
class="form-control"
autocomplete="off"
value="1"
autocompvare="off"
v-model="submit_sheet.order_status"
>
<option v-for="(value, key) in order_status" :value="key">
{{ value }}
@@ -409,6 +451,8 @@ watch(
</div>
</div>
</div>
<MyOffcanvas ref="mos" />
</template>
<style></style>