添加和修改功能

packageRc/components/ImageUpload.vue

@@ -1,9 +1,10 @@
 <template>
 	<view class="upload-container">
-		<input type="file" multiple="multiple" accept="image/*" @change="handleFileChange">
-		<!-- <uni-upload :disabled="disabled" :width="width" :height="height" :fileList="internalFileList" :name="name" :multiple="multiple"
-			:maxCount="maxCount" @afterRead="handleAfterRead" @delete="handleRemove">
-		</uni-upload> -->
+		<view @click="chooseAndUploadFile" class="upload-button">+ 上传文件</view>
+		<view v-for="(item, index) in internalFileList" :key="index" class="files-list">
+			<view class="file-name">{{ item.file.name }}</view>
+			<view class="delete-btn" @click="deleteFile(index)">删除</view>
+		</view>
 	</view>
 </template>
 
@@ -11,7 +12,9 @@
 //	import {
 //		uploadImg
 //	} from '@/api/company'
-	import config from '@/config'
+	// import config from '@/config'
+import config from '@/utilsRc/config.js'
+import { getToken } from "@/utilsRc/auth";
 	//import {
 	//	getToken
 	//} from '@/utils/auth'
@@ -23,7 +26,7 @@
 			},
 			allowedFormats: {
 				type: Array,
-				default: () => [], // 允许的文件格式
+				default: () => ['.png', '.jpg', '.jpeg', '.doc', '.docx', '.pdf', '.xls', '.xlsx'], // 允许的文件格式
 			},
 			maxImageSize: {
 				type: Object,
@@ -74,6 +77,106 @@
 			},
 		},
 		methods: {
+			deleteFile(index){
+				this.internalFileList.splice(index, 1);
+			},
+			chooseAndUploadFile() {
+				wx.chooseMessageFile({
+					count: this.maxCount,
+					extension: this.allowedFormats,
+					// ['.png', '.jpg', '.jpeg', '.doc', '.docx', '.pdf', '.xls', '.xlsx' ],
+					success: (res) => { 
+						console.log('选择文件成功:', res);
+						if(this.maxCount - this.internalFileList.length < res.tempFiles.length){
+							uni.showToast({
+								title: '最多只能上传' + this.maxCount + '个文件',
+								icon: 'none'
+							});
+							return;
+						}
+
+						let path = "";
+							const twoMBInBytes = 2 * 1024 * 1024; // 2MB转换为字节数
+							res.tempFiles.forEach((file) => {
+
+								if (file.size > twoMBInBytes) {
+									uni.showToast({
+										title: "图片大小不能超过2MB",
+										icon: "none",
+									});
+									return;
+								}
+								if (res.tempFiles && res.tempFiles.length > 0) {
+									path = file.path;
+									if (this.allowedFormats.indexOf('.'+path.split(".")[1])!=-1) {
+										uni.showLoading();
+										const tempFilePath = file;
+										uni.uploadFile({
+											url: config.baseUrl+'/system/oss/upload', //图片上传地址
+											filePath: tempFilePath.path,
+											name: 'file',
+											formData: {},
+											header: {
+												// 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJQSlUyVlJCc1E1aXRMMWgxdjNkcVh2eER1c2VVc0hvRiIsInVzZXJJZCI6MX0.z4Z2XqgXyU0GQU-i7Bsa5T-zCKApTxj1YQ73rk7bAVo'
+												'Authorization': 'Bearer ' + getToken(),
+											},
+											success: (res) => {
+												var data = JSON.parse(res.data);
+												console.log(data, 'sdfjiosdjfoi')
+												if(data.code==200) {
+													this.internalFileList.push({
+														url: data.data.url,
+														file: file
+													})
+													this.$emit('update', this.internalFileList);
+													// this.serviceForm.fileUrl = this.internalFileList.map(item => item.url).join(',')
+													this.$forceUpdate()
+													uni.hideLoading();
+												} else {
+													uni.hideLoading();
+													uni.showToast({
+														title: res.msg || '上传失败',
+														icon: 'none',
+														duration: 2000
+													});
+												}
+											},
+											fail: (error) => {
+												uni.showToast({
+													title: '上传失败',
+													icon: 'none'
+												});
+												console.error(error);
+											}
+										})
+									} else {
+										uni.showToast({
+											icon: "none",
+											duration: 1500,
+											title: `只能选择${this.allowedFormats.join('、')}格式文件`,
+										});
+									}
+								}
+							})
+
+
+
+						// // 添加新选择的图片到列表
+						// res.tempFiles.forEach((item, index) => {
+						//   this.fileList.push({
+						//     url: item.path,
+						//     file: res.tempFiles[index]
+						//   });
+						// });
+						// 更新 serviceForm.fileUrl
+						// this.updateFileUrls();
+					},
+					fail: (err) => {
+						console.error('选择图片失败:', err);
+					}
+				});
+    
+			},
 			// 新增图片
 			async handleAfterRead(event) {
 				let lists = [].concat(event.file);
@@ -141,11 +244,25 @@
 	};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.upload-container {
+	}
+	.files-list {
 		display: flex;
-		align-items: center;
-		justify-content: center;
+		justify-content: space-between;
+		margin-top: 10rpx;
+		line-height: 50rpx;
+		.file-name{
+			width: calc(100% - 80rpx);
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.delete-btn{
+			width: 80rpx;
+			text-align: right;
+			color: red;
+		}
 	}
 
 	.upload-slot {
@@ -156,4 +273,13 @@
 		border-radius: 4px;
 		padding: 20px;
 	}
+	.upload-button {
+		border: 1px dashed #ccc;
+		border-radius: 4px;
+		padding: 0 24rpx;
+		width: 280rpx;
+		text-align: center;
+		background: #fff;
+		line-height: 64rpx;
+	}
 </style>