From a9d97b150701e634bdb751eab277696abd136cca Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 16 六月 2026 14:39:47 +0800
Subject: [PATCH] 君歌app 1.依照web端功能修改
---
src/components/CommonUpload.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 164 insertions(+), 0 deletions(-)
diff --git a/src/components/CommonUpload.vue b/src/components/CommonUpload.vue
new file mode 100644
index 0000000..8910206
--- /dev/null
+++ b/src/components/CommonUpload.vue
@@ -0,0 +1,164 @@
+<template>
+ <view class="common-upload">
+ <u-upload
+ :fileList="internalFileList"
+ @afterRead="afterRead"
+ @delete="deleteFile"
+ :name="name"
+ :multiple="multiple"
+ :maxCount="maxCount"
+ :accept="accept"
+ :disabled="disabled"
+ ></u-upload>
+ </view>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { getToken } from "@/utils/auth";
+import config from "@/config";
+
+const props = defineProps({
+ // 鐖剁粍浠朵紶鍏ョ殑鏂囦欢鍒楄〃锛堝搴斿悗绔瓨鍌ㄧ殑瀵硅薄鍒楄〃锛�
+ modelValue: {
+ type: Array,
+ default: () => []
+ },
+ // 鏈�澶т笂浼犳暟閲�
+ maxCount: {
+ type: Number,
+ default: 9
+ },
+ // 鏄惁鏀寔澶氶��
+ multiple: {
+ type: Boolean,
+ default: true
+ },
+ // 鎺ュ彈鐨勬枃浠剁被鍨�
+ accept: {
+ type: String,
+ default: 'image'
+ },
+ // 涓婁紶鎺ュ彛瀵瑰簲鐨勫弬鏁板悕
+ name: {
+ type: String,
+ default: 'file'
+ },
+ // 鏄惁绂佺敤
+ disabled: {
+ type: Boolean,
+ default: false
+ }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+// 鐢ㄤ簬 u-upload 鏄剧ず鐨勫唴閮ㄥ垪琛�
+const internalFileList = ref([]);
+
+// 鐩戝惉澶栭儴 modelValue 鍙樺寲锛屽悓姝ュ埌鍐呴儴鏄剧ず鍒楄〃
+watch(() => props.modelValue, (newVal) => {
+ if (newVal) {
+ internalFileList.value = newVal.map(item => ({
+ ...item,
+ url: item.url || item.previewURL,
+ status: 'success',
+ message: ''
+ }));
+ }
+}, { immediate: true, deep: true });
+
+const showToast = (message) => {
+ uni.showToast({
+ title: message,
+ icon: "none",
+ });
+};
+
+// 涓婁紶閫昏緫
+const uploadFilePromise = (url) => {
+ return new Promise((resolve, reject) => {
+ uni.uploadFile({
+ url: config.baseUrl + "/common/upload",
+ filePath: url,
+ name: "files", // 娉ㄦ剰锛氳繖閲屾牴鎹師浠ｇ爜鏄� "files"
+ header: {
+ Authorization: "Bearer " + getToken(),
+ },
+ success: (res) => {
+ try {
+ const data = JSON.parse(res.data);
+ if (data.code === 200) {
+ // 濡傛灉杩斿洖鐨勬槸鏁扮粍锛屽彇绗竴涓厓绱�
+ const resultData = Array.isArray(data.data) ? data.data[0] : data.data;
+
+ // 澶勭悊 url 璧嬪��
+ if (!resultData.url && resultData.previewURL) {
+ resultData.url = resultData.previewURL;
+ }
+ // 鍏煎鍘熶唬鐮佷腑鐨� name 璧嬪��
+ if (!resultData.name && resultData.originalFilename) {
+ resultData.name = resultData.originalFilename;
+ }
+
+ resolve(resultData);
+ } else {
+ reject(data.msg || "涓婁紶澶辫触");
+ }
+ } catch (e) {
+ reject("瑙ｆ瀽鍝嶅簲澶辫触");
+ }
+ },
+ fail: (err) => {
+ reject(err);
+ },
+ });
+ });
+};
+
+// 涓婁紶鍚庣殑澶勭悊
+const afterRead = async (event) => {
+ let lists = [].concat(event.file);
+ let currentModelValue = [...props.modelValue];
+
+ // 鍏堝湪鍐呴儴鍒楄〃涓坊鍔犲崰浣嶏紙涓婁紶涓姸鎬侊級
+ lists.forEach(item => {
+ internalFileList.value.push({
+ ...item,
+ status: 'uploading',
+ message: '涓婁紶涓�'
+ });
+ });
+
+ for (let i = 0; i < lists.length; i++) {
+ try {
+ const result = await uploadFilePromise(lists[i].url);
+
+ // 鏇存柊 modelValue
+ currentModelValue.push(result);
+ emit('update:modelValue', currentModelValue);
+
+ } catch (e) {
+ // 濡傛灉涓婁紶澶辫触锛屼粠鍐呴儴鍒楄〃涓Щ闄ゅ垰鎵嶆坊鍔犵殑椤�
+ const errorIndex = internalFileList.value.findIndex(item => item.status === 'uploading');
+ if (errorIndex > -1) {
+ internalFileList.value.splice(errorIndex, 1);
+ }
+ showToast(typeof e === "string" ? e : "涓婁紶澶辫触");
+ }
+ }
+};
+
+// 鍒犻櫎澶勭悊
+const deleteFile = (event) => {
+ const newList = [...props.modelValue];
+ newList.splice(event.index, 1);
+ emit('update:modelValue', newList);
+};
+</script>
+
+<style scoped lang="scss">
+.common-upload {
+ width: 100%;
+}
+</style>
--
Gitblit v1.9.3