From 631c8f37b449b09d19345b76400a39abdb7800f6 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 15 一月 2026 15:48:42 +0800
Subject: [PATCH] api封装档案、上报、转运接入
---
src/components/UploadAttachment/index.vue | 145 +++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 141 insertions(+), 4 deletions(-)
diff --git a/src/components/UploadAttachment/index.vue b/src/components/UploadAttachment/index.vue
index 290362c..cbd5e9f 100644
--- a/src/components/UploadAttachment/index.vue
+++ b/src/components/UploadAttachment/index.vue
@@ -1,35 +1,172 @@
<template>
<div class="upload-attachment">
<el-upload
- action="#"
+ ref="upload"
+ :action="uploadAction"
+ :headers="headers"
:file-list="fileList"
:auto-upload="false"
+ :multiple="true"
+ :limit="limit"
+ :accept="accept"
+ :on-exceed="handleExceed"
:on-change="handleFileChange"
:on-remove="handleFileRemove"
- multiple
+ :on-success="handleUploadSuccess"
+ :on-error="handleUploadError"
+ :before-upload="beforeUpload"
>
- <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
- <div slot="tip" class="el-upload__tip">鏀寔jpg銆乸ng銆乸df銆乨oc銆乨ocx绛夋牸寮忥紝鍗曚釜鏂囦欢涓嶈秴杩�10MB</div>
+ <el-button slot="trigger" size="small" type="primary">閫夊彇鏂囦欢</el-button>
+ <el-button
+ style="margin-left: 10px;"
+ size="small"
+ type="success"
+ @click="submitUpload"
+ :disabled="fileList.length === 0"
+ >
+ 涓婁紶鍒版湇鍔″櫒
+ </el-button>
+ <div slot="tip" class="el-upload__tip">
+ 璇蜂笂浼� {{ accept }} 鏍煎紡鐨勬枃浠讹紝鍗曚釜鏂囦欢涓嶈秴杩�10MB锛屾渶澶氬彲涓婁紶{{ limit }}涓枃浠�
+ </div>
</el-upload>
</div>
</template>
<script>
+import { getToken } from "@/utils/auth";
+
export default {
name: "UploadAttachment",
props: {
+ // 鏂囦欢鍒楄〃
fileList: {
type: Array,
default: () => []
+ },
+ // 涓婁紶鏁伴噺闄愬埗
+ limit: {
+ type: Number,
+ default: 10
+ },
+ // 鎺ュ彈鐨勬枃浠剁被鍨�
+ accept: {
+ type: String,
+ default: ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
+ },
+ // 涓婁紶鍦板潃
+ uploadUrl: {
+ type: String,
+ default: process.env.VUE_APP_BASE_API + "/common/upload"
}
},
+ data() {
+ return {
+ uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
+ headers: {
+ Authorization: "Bearer " + getToken()
+ }
+ };
+ },
methods: {
+ /** 鏂囦欢閫夋嫨鍙樺寲 */
handleFileChange(file, fileList) {
this.$emit('change', fileList);
},
+
+ /** 鏂囦欢绉婚櫎 */
handleFileRemove(file, fileList) {
this.$emit('change', fileList);
+ this.$emit('remove', file);
+ },
+
+ /** 涓婁紶鎴愬姛澶勭悊 */
+ handleUploadSuccess(response, file, fileList) {
+ if (response.code === 200) {
+ file.url = response.data || response.url;
+ this.$message.success('鏂囦欢涓婁紶鎴愬姛');
+ this.$emit('upload-success', {
+ file,
+ fileList,
+ response
+ });
+ } else {
+ this.$message.error(response.msg || '鏂囦欢涓婁紶澶辫触');
+ }
+ },
+
+ /** 涓婁紶閿欒澶勭悊 */
+ handleUploadError(err, file, fileList) {
+ console.error('涓婁紶澶辫触:', err);
+ this.$message.error('鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯');
+ this.$emit('upload-error', {
+ file,
+ fileList,
+ error: err
+ });
+ },
+
+ /** 涓婁紶鍓嶆牎楠� */
+ beforeUpload(file) {
+ // 妫�鏌ユ枃浠剁被鍨�
+ const allowedTypes = this.accept.split(',').map(type => type.trim().toLowerCase());
+ const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+
+ if (!allowedTypes.includes(fileExtension) && !allowedTypes.includes(fileExtension.substring(1))) {
+ this.$message.error(`涓嶆敮鎸佺殑鏂囦欢鏍煎紡: ${fileExtension}`);
+ return false;
+ }
+
+ // 妫�鏌ユ枃浠跺ぇ灏� (10MB闄愬埗)
+ const isLt10M = file.size / 1024 / 1024 < 10;
+ if (!isLt10M) {
+ this.$message.error('鏂囦欢澶у皬涓嶈兘瓒呰繃 10MB!');
+ return false;
+ }
+
+ return true;
+ },
+
+ /** 鏂囦欢鏁伴噺瓒呭嚭闄愬埗 */
+ handleExceed(files, fileList) {
+ this.$message.warning(`鏈�澶氬彧鑳戒笂浼� ${this.limit} 涓枃浠讹紝褰撳墠閫夋嫨浜� ${files.length} 涓枃浠禶);
+ },
+
+ /** 鎵嬪姩鎻愪氦涓婁紶 */
+ submitUpload() {
+ if (this.fileList.length === 0) {
+ this.$message.warning('璇峰厛閫夋嫨瑕佷笂浼犵殑鏂囦欢');
+ return;
+ }
+
+ this.$refs.upload.submit();
+ },
+
+ /** 娓呯┖鏂囦欢鍒楄〃 */
+ clearFiles() {
+ this.$refs.upload.clearFiles();
+ },
+
+ /** 鑾峰彇褰撳墠鏂囦欢鍒楄〃 */
+ getFileList() {
+ return this.fileList;
}
}
};
</script>
+
+<style scoped>
+.upload-attachment {
+ width: 100%;
+}
+
+::v-deep .el-upload {
+ display: block;
+}
+
+::v-deep .el-upload__tip {
+ margin-top: 8px;
+ font-size: 12px;
+ color: #909399;
+}
+</style>
--
Gitblit v1.9.3