talk_appAmin/pages/common/file/fileUpload/addFileUpload.vue

<template>
	<!-- 默认上传样式 -->
	<up-upload :accept="fileTypeInfo" :maxCount="limit" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
		:maxSize="fileSize" name="fileInfowx" multiple :previewFullImage="true" :width="pwidth" :height="pheight">


		<slot name="default-image">
			<view class="default-image">
				<image class="imageup" src="../../../../static/images/sign/porops.png" style="width: 78rpx; height: 66rpx;"></image>
				<view>
					<text class="next-bot-text">({{fileList1.length}}/3)</text>
				</view>
			</view>
		</slot>
	</up-upload>
</template>

<script setup>
	import {
		getQNtoken,
		addFileList
	} from "@/api/qiniu/info";
	import config1 from "@/config";
	import {
		ref,
		reactive,
		getCurrentInstance,
		defineEmits,
		watch
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	import * as qiniu from 'qiniu-js'

	const fileList1 = ref([])
	const emit = defineEmits();
	const {
		proxy
	} = getCurrentInstance();
	const uploadQiNiuDomain = config1.uploadQiNiuDomain;
	const iconConfig = proxy.iconConfig;

	const tu2x = iconConfig.tu2x;

	const store = useStore();

	const props = defineProps({
		modelValue: [String, Object, Array],
		fileTypeInfo: {
			type: String,
			default: "image",
		},
		limit: {
			type: Number,
			default: 6,
		},
		fileSize: {
			type: Number,
			default: 100 * 1024 * 1024,
		},
		pwidth: {
			type: String,
			default: '210rpx'
		},
		pheight: {
			type: String,
			default: '210rpx'
		},
		pstyle: {
			type: String,
			default: ''
		}
	});
	watch(() => props.modelValue, val => {
		if (val) {
			let temp = 1;
			// 首先将值转为数组
			const list = Array.isArray(val) ? val : props.modelValue.split(',');
			// 然后将数组转为对象数组
			fileList1.value = list.map(item => {
				if (typeof item === "string") {
					item = {
						name: item,
						url: store.state.user.QNDomain + item,
						furl: item
					};
				}
				item.uid = item.uid || new Date().getTime() + temp++;
				return item;
			});
		} else {
			fileList1.value = [];
			return [];
		}
	}, {
		deep: true,
		immediate: true
	});
	const url = ref('');


	const dataToken = reactive({
		token: '',
		key: ''
	});
	const fileInfo = reactive({
		name: '',
		type: '',
		extension: ''
	});
	const config = reactive({
		useCdnDomain: true,
		region: qiniu.region.z2,
		checkByMD5: true,
		forceDirect: false
	});
	const putExtra = reactive({});
	const form = reactive({
		id: null,
		configId: null,
		name: null,
		path: null,
		url: null,
		type: null,
		fileCategory: null,
		size: null,
		creator: null,
		createTime: null,
		updater: null,
		updateTime: null,
		deleted: null
	});

	// 新增图片
	const afterRead = async (event) => {

		let name = event.name;
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.forEach(item => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			try {
				const result = await uploadFilePromise(lists[i], name);
				let item = fileList1.value[fileListLen];
				fileList1.value.splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: store.state.user.QNDomain + result,
					furl: result
				});
				emit("update:modelValue", listToString(fileList1.value));
				emit("upInfo", listToString(fileList1.value))
				fileListLen++;
			} catch (error) {
				console.error("上传失败:", error);
			}
		}
	};

	const uploadFilePromise = async (fileInfo1, name) => {

		// 主要目的的拼名字，大小，类型
		let fileNameOld = [0, 1];
		if (fileInfo1.name !== undefined) {
			fileNameOld = fileInfo1.name.split('.');
		}

		fileInfo.name = fileNameOld[0] + "_" + store.state.user.phoneType + "_" + name;

		let extension1 = fileInfo1.url.split('.');

		// 防止 h5 报错
		if (extension1[1] === undefined) {
			extension1[1] = fileNameOld[fileNameOld.length - 1]; //保证取最后一个
		}
		//主要是为了拼接文件type（video/mp4），因为各端传入的type各有不同
		fileInfo.type = fileInfo1.type + "/" + extension1[extension1.length - 1];

		fileInfo.extension = extension1[1];
		try {
			const tokenData = await getQNtoken(fileInfo);
			dataToken.token = tokenData.QNtoken;
			dataToken.key = tokenData.key;

			const result = await uploadQN(fileInfo1);
			return result;
		} catch (error) {
			console.error("获取 token 或上传失败:", error);
			throw error;
		}
	};
	//多走一步，为了实现文件分片上传（废弃，简单上传即可）
	const uploadQN = (file) => {
		return uploadQN1(file.url);
	};

	//调用uni上传方法
	const uploadQN1 = (file) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: uploadQiNiuDomain,
				filePath: file,
				name: 'file',
				formData: {
					'key': dataToken.key,
					'token': dataToken.token
				},
				success: async (e) => {
					try {
						let data = JSON.parse(e.data);
						form.url = data.key;
						form.name = data.key;
						form.type = data.fileType;
						form.size = data.fsize;
						await addFileList(form);
						resolve(form.url);
					} catch (error) {
						console.error("处理上传成功响应时出错:", error);
						reject(error);
					}
				},
				fail: (e) => {
					console.log("上传失败:", e);
					reject(e);
				}
			});
		});
	};

	const deletePic = (e) => {
		fileList1.value.splice(e.index, 1);
		emit("update:modelValue", listToString(fileList1.value));
	};

	const typeInfo = () => {
		store.dispatch('getPhoneType');

	};
	// 对象转成指定字符串分隔
	function listToString(list, separator) {
		let strs = "";
		separator = separator || ",";
		for (let i in list) {
			if (list[i].url) {
				strs += list[i].furl + separator;
			}
		}
		return strs != '' ? strs.substr(0, strs.length - 1) : '';
	}
	typeInfo();
</script>

<style lang="scss" scoped>
	.default-image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #f4f5f6;
	}
	.imageup {
		width: 78rpx;
		height: 66rpx;
		display: block;
		float: left;
		margin-left: 71rpx;
		margin-top: 57rpx;
	}
	.next-bot-text {
		font-weight: Regular;
		width: 65rpx;
		height: 29rpx;
		font-size: 30rpx;
		text-align: left;
		color: #999999;
	
		display: block;
		float: left;
		margin-left: 75rpx;
		/* margin-top: 11rpx; */
	}
</style>