GuangYuYuan-app/src/components/upload/index.vue

<template>
	<u-upload :name="name" 
		:width="width" :height="height" 
		:accept="accept" :fileList="fileList" 
		:multiple="multiple" :maxCount="maxCount" 
		@afterRead="afterRead" @delete="onDelete">
		<slot name="content" :data="fileList"></slot>
	</u-upload>
</template>

<script>
import { baseUrl } from '@/common/config.js';
export default {
	name: "",
	props: {
		api: {
			type: String,
			default: '/common/upload'
		},
		name: {
			type: String,
			default: uni.$u.props.upload.name
		},
		accept: {
			type: String,
			default: uni.$u.props.upload.accept
		},
		width: {
			type: [String, Number],
			default: uni.$u.props.upload.width
		},
		height: {
			type: [String, Number],
			default: uni.$u.props.upload.height
		},
        // 文件大小限制，单位为byte
		maxSize: {
			type: [String, Number],
            default: uni.$u.props.upload.maxSize
		},
		maxCount: {
			type: Number,
			default: 5
		},
		multiple: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			fileList: [],
		};
	},
	computed: {

	},
	mounted() {

	},
	beforeDestroy() {

	},
	methods: {
		// 上传后的处理函数
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList`].length;
			lists.map((item) => {
				this[`fileList`].push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			// 无预览时，使用toast
			if (!this.$attrs.previewImage) {
				uni.showLoading({
					title: '上传中...'
				});
			}
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList`][fileListLen];
				this[`fileList`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: baseUrl + result,
					})
				);
				fileListLen++;
				// 无预览时，使用toast
				if (!this.$attrs.previewImage) {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: result.message || '上传完成',
						duration: 2000
					});
					this.$emit('complete');
				}
			}
			this.$emit('fileList', this.fileList);
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: baseUrl + this.api,
					name: "file",
					header: {
						'Authorization': `tf: ${uni.getStorageSync('access-token')}`
					},
					formData: {
						'biz': 'temp',
					},
					filePath: url,
					success: (res) => {
						let data = JSON.parse(res.data);
						if (data.code === 200) {
							resolve(data.fileName);
						} else {
							uni.$u.toast('上传失败');
							reject();
						}
					},
				});
			});
		},
		onDelete(event) {
			uni.showModal({
				title: '提示',
				content: '确定要删除？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this[`fileList`].splice(event.index, 1);
						this.$emit('fileList', this.fileList);
					}
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped></style>