From ea6ad9ddc3d5b33897e93276282245f7023836ff Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 28 八月 2025 17:45:28 +0800
Subject: [PATCH] 大数据市场分析
---
src/components/FileUpload/SimpleMultiFileUpload.vue | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 118 insertions(+), 0 deletions(-)
diff --git a/src/components/FileUpload/SimpleMultiFileUpload.vue b/src/components/FileUpload/SimpleMultiFileUpload.vue
new file mode 100644
index 0000000..f02a1d3
--- /dev/null
+++ b/src/components/FileUpload/SimpleMultiFileUpload.vue
@@ -0,0 +1,118 @@
+<script setup>
+import {computed, ref, reactive, defineEmits,watch} from "vue";
+import {getToken} from "@/utils/auth.js";
+import axios from "axios";
+import {ElMessage} from "element-plus";
+
+const emit = defineEmits(['update:fileList', 'onUpload',"update:ids"]);
+
+const props = defineProps({
+ action: {type: String, default: "/common/minioUploads"},
+ fileList: {type: Array, default: () => []},
+ statusType: {type: Number, default: 0}
+})
+
+const localFileList = ref([...props.fileList])
+
+
+const headers = computed(() => ({Authorization: "Bearer " + getToken()}));
+const uploadFileUrl = computed(() => import.meta.env.VITE_APP_BASE_API + props.action);
+
+const handleChange = () => {
+ emit('update:ids', localFileList.value.map(item => item.id))
+ emit('update:fileList', localFileList.value)
+ emit('onUpload', localFileList.value)
+}
+const handleUploadSuccess = (res, file) => {
+ // console.log(res)
+ localFileList.value.push(...res.data.map((it) => {
+ return {
+ id: it.id,
+ url: it.downloadUrl,
+ name: it.originalFilename,
+ status: "success",
+ uid: file.uid
+ }
+ }))
+ handleChange()
+}
+
+const handleUploadPreview = (it) => {
+ const link = document.createElement("a");
+ if (it.url) {
+ link.href = it.url
+ } else {
+ link.href = localFileList.value.find(fl => fl.uid === it.uid).url;
+ }
+ link.download = it.name;
+ link.click();
+}
+
+const handleUploadRemove = (it) => {
+ localFileList.value = localFileList.value.filter(f => f.uid !== it.uid);
+ handleChange()
+}
+
+watch(
+ () => props.fileList,
+ (val) => {
+ localFileList.value = [...val]
+ },
+ { immediate: true, deep: true }
+)
+
+// 鏂囦欢涓婁紶澶勭悊
+const UploadImage = (param) => {
+ const formData = new FormData();
+ formData.append("files", param.file);
+ formData.append("type", props.statusType);
+ axios.post(uploadFileUrl.value, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ ...headers.value,
+ },
+ onUploadProgress: (progressEvent) => {
+ const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+ param.onProgress({percent});
+ },
+ })
+ .then((response) => {
+ if (response.data.code === 200) {
+ handleUploadSuccess(response.data, param.file);
+ ElMessage.success("涓婁紶鎴愬姛");
+ } else {
+ param.onError(new Error(response.data.msg));
+ ElMessage.error(response.data.msg);
+ }
+ })
+ .catch((error) => {
+ param.onError(error);
+ });
+};
+
+</script>
+
+<template>
+ <div class="upload-file">
+ <el-upload
+ class="upload-demo"
+ drag
+ :fileList="localFileList"
+ :action="props.action"
+ :headers="headers"
+ :http-request="UploadImage"
+ :on-success="handleUploadSuccess"
+ :on-remove="handleUploadRemove"
+ :on-preview="handleUploadPreview"
+ multiple>
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+ </el-upload>
+ </div>
+</template>
+
+<style scoped lang="scss">
+
+
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3