From 4b1304917b0b16b09dd50191fab59d96933c0cf3 Mon Sep 17 00:00:00 2001
From: 曹睿 <360930172@qq.com>
Date: 星期二, 17 六月 2025 17:31:11 +0800
Subject: [PATCH] feat: 6月15日任务完90%
---
src/components/ImageUpload/index.vue | 200 ++++++++++++++++++++++++++------------------------
1 files changed, 104 insertions(+), 96 deletions(-)
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 89cc790..9670c72 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -47,202 +47,210 @@
</template>
<script setup>
-import { getToken } from "@/utils/auth"
-import { isExternal } from "@/utils/validate"
-import Sortable from 'sortablejs'
+import { getToken } from "@/utils/auth";
+import { isExternal } from "@/utils/validate";
+import Sortable from "sortablejs";
const props = defineProps({
modelValue: [String, Object, Array],
// 涓婁紶鎺ュ彛鍦板潃
action: {
type: String,
- default: "/common/upload"
+ default: "/common/upload",
},
// 涓婁紶鎼哄甫鐨勫弬鏁�
data: {
- type: Object
+ type: Object,
},
// 鍥剧墖鏁伴噺闄愬埗
limit: {
type: Number,
- default: 5
+ default: 5,
},
// 澶у皬闄愬埗(MB)
fileSize: {
type: Number,
- default: 5
+ default: 5,
},
// 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
fileType: {
type: Array,
- default: () => ["png", "jpg", "jpeg"]
+ default: () => ["png", "jpg", "jpeg"],
},
// 鏄惁鏄剧ず鎻愮ず
isShowTip: {
type: Boolean,
- default: true
+ default: true,
},
// 鎷栧姩鎺掑簭
drag: {
type: Boolean,
- default: true
- }
-})
+ default: true,
+ },
+});
-const { proxy } = getCurrentInstance()
-const emit = defineEmits()
-const number = ref(0)
-const uploadList = ref([])
-const dialogImageUrl = ref("")
-const dialogVisible = ref(false)
-const baseUrl = import.meta.env.VITE_APP_BASE_API
-const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
-const headers = ref({ Authorization: "Bearer " + getToken() })
-const fileList = ref([])
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const number = ref(0);
+const uploadList = ref([]);
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
-)
+);
-watch(() => props.modelValue, val => {
- if (val) {
- // 棣栧厛灏嗗�艰浆涓烘暟缁�
- const list = Array.isArray(val) ? val : props.modelValue.split(",")
- // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
- fileList.value = list.map(item => {
- if (typeof item === "string") {
- if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {
- item = { name: baseUrl + item, url: baseUrl + item }
- } else {
- item = { name: item, url: item }
+watch(
+ () => props.modelValue,
+ (val) => {
+ if (val) {
+ // 棣栧厛灏嗗�艰浆涓烘暟缁�
+ const list = Array.isArray(val) ? val : props.modelValue.split(",");
+ // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
+ fileList.value = list.map((item) => {
+ if (typeof item === "string") {
+ if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {
+ item = { name: baseUrl + item, url: baseUrl + item };
+ } else {
+ item = { name: item, url: item };
+ }
}
- }
- return item
- })
- } else {
- fileList.value = []
- return []
- }
-},{ deep: true, immediate: true })
+ return item;
+ });
+ } else {
+ fileList.value = [];
+ return [];
+ }
+ },
+ { deep: true, immediate: true }
+);
// 涓婁紶鍓峫oading鍔犺浇
function handleBeforeUpload(file) {
- let isImg = false
+ let isImg = false;
if (props.fileType.length) {
- let fileExtension = ""
+ let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
- fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1)
+ fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
- isImg = props.fileType.some(type => {
- if (file.type.indexOf(type) > -1) return true
- if (fileExtension && fileExtension.indexOf(type) > -1) return true
- return false
- })
+ isImg = props.fileType.some((type) => {
+ if (file.type.indexOf(type) > -1) return true;
+ if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+ return false;
+ });
} else {
- isImg = file.type.indexOf("image") > -1
+ isImg = file.type.indexOf("image") > -1;
}
if (!isImg) {
- proxy.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭紝璇蜂笂浼�${props.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!`)
- return false
+ proxy.$modal.msgError(
+ `鏂囦欢鏍煎紡涓嶆纭紝璇蜂笂浼�${props.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!`
+ );
+ return false;
}
- if (file.name.includes(',')) {
- proxy.$modal.msgError('鏂囦欢鍚嶄笉姝ｇ‘锛屼笉鑳藉寘鍚嫳鏂囬�楀彿!')
- return false
+ if (file.name.includes(",")) {
+ proxy.$modal.msgError("鏂囦欢鍚嶄笉姝ｇ‘锛屼笉鑳藉寘鍚嫳鏂囬�楀彿!");
+ return false;
}
if (props.fileSize) {
- const isLt = file.size / 1024 / 1024 < props.fileSize
+ const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
- proxy.$modal.msgError(`涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`)
- return false
+ proxy.$modal.msgError(`涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`);
+ return false;
}
}
- proxy.$modal.loading("姝ｅ湪涓婁紶鍥剧墖锛岃绋嶅��...")
- number.value++
+ proxy.$modal.loading("姝ｅ湪涓婁紶鍥剧墖锛岃绋嶅��...");
+ number.value++;
}
// 鏂囦欢涓暟瓒呭嚭
function handleExceed() {
- proxy.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`)
+ proxy.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`);
}
// 涓婁紶鎴愬姛鍥炶皟
function handleUploadSuccess(res, file) {
if (res.code === 200) {
- uploadList.value.push({ name: res.fileName, url: res.fileName })
- uploadedSuccessfully()
+ uploadList.value.push({ name: res.fileName, url: res.fileName });
+ uploadedSuccessfully();
} else {
- number.value--
- proxy.$modal.closeLoading()
- proxy.$modal.msgError(res.msg)
- proxy.$refs.imageUpload.handleRemove(file)
- uploadedSuccessfully()
+ number.value--;
+ proxy.$modal.closeLoading();
+ proxy.$modal.msgError(res.msg);
+ proxy.$refs.imageUpload.handleRemove(file);
+ uploadedSuccessfully();
}
}
// 鍒犻櫎鍥剧墖
function handleDelete(file) {
- const findex = fileList.value.map(f => f.name).indexOf(file.name)
+ const findex = fileList.value.map((f) => f.name).indexOf(file.name);
if (findex > -1 && uploadList.value.length === number.value) {
- fileList.value.splice(findex, 1)
- emit("update:modelValue", listToString(fileList.value))
- return false
+ fileList.value.splice(findex, 1);
+ emit("update:modelValue", listToString(fileList.value));
+ return false;
}
}
// 涓婁紶缁撴潫澶勭悊
function uploadedSuccessfully() {
if (number.value > 0 && uploadList.value.length === number.value) {
- fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
- uploadList.value = []
- number.value = 0
- emit("update:modelValue", listToString(fileList.value))
- proxy.$modal.closeLoading()
+ fileList.value = fileList.value
+ .filter((f) => f.url !== undefined)
+ .concat(uploadList.value);
+ uploadList.value = [];
+ number.value = 0;
+ emit("update:modelValue", listToString(fileList.value));
+ proxy.$modal.closeLoading();
}
}
// 涓婁紶澶辫触
function handleUploadError() {
- proxy.$modal.msgError("涓婁紶鍥剧墖澶辫触")
- proxy.$modal.closeLoading()
+ proxy.$modal.msgError("涓婁紶鍥剧墖澶辫触");
+ proxy.$modal.closeLoading();
}
// 棰勮
function handlePictureCardPreview(file) {
- dialogImageUrl.value = file.url
- dialogVisible.value = true
+ dialogImageUrl.value = file.url;
+ dialogVisible.value = true;
}
// 瀵硅薄杞垚鎸囧畾瀛楃涓插垎闅�
function listToString(list, separator) {
- let strs = ""
- separator = separator || ","
+ let strs = "";
+ separator = separator || ",";
for (let i in list) {
if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
- strs += list[i].url.replace(baseUrl, "") + separator
+ strs += list[i].url.replace(baseUrl, "") + separator;
}
}
- return strs != "" ? strs.substr(0, strs.length - 1) : ""
+ return strs != "" ? strs.substr(0, strs.length - 1) : "";
}
// 鍒濆鍖栨嫋鎷芥帓搴�
onMounted(() => {
if (props.drag) {
nextTick(() => {
- const element = document.querySelector('.el-upload-list')
+ const element = document.querySelector(".el-upload-list");
Sortable.create(element, {
onEnd: (evt) => {
- const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
- fileList.value.splice(evt.newIndex, 0, movedItem)
- emit('update:modelValue', listToString(fileList.value))
- }
- })
- })
+ const movedItem = fileList.value.splice(evt.oldIndex, 1)[0];
+ fileList.value.splice(evt.newIndex, 0, movedItem);
+ emit("update:modelValue", listToString(fileList.value));
+ },
+ });
+ });
}
-})
+});
</script>
<style scoped lang="scss">
// .el-upload--picture-card 鎺у埗鍔犲彿閮ㄥ垎
:deep(.hide .el-upload--picture-card) {
- display: none;
+ display: none;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3