LocalLivingServicesUniapp/components/upload/index.vue

<template>
	<u-upload :action="action" :fileList="fileListData"   :custom-btn="isImage" ref="uUpload"
		:key="uploadKey"
		v-bind="$attrs" 
		@on-remove="onRemove"
		@on-success="afterRead"
		@on-choose-complete='onChoose'
		@on-list-change="onListChange">
		<template v-if='isImage'>
			<view slot="addBtn">
        <slot></slot>
   		</view>
		</template>
	</u-upload>
</template>

<script>
import configService from '@/common/service/config.service';
export default {
	name: "",
	props: {
		isImage:{
			type:Boolean, //是否用自定义图片
			default:false
		},
		api: {
			type: String,
			default: '/sys/common/upload'
		},
		fileList: {
			type: Array,
			default: () => []
		},
	},
	data() {
		return {
			fileListData: [],
			uploadKey:0 // 清空时改变 key，强制重建组件
		};
	},
	watch: {
		fileList: {
			immediate: true,
			handler(n) {
				if (n.length > 0) {
					this.fileListData = n;
				}else{
					this.fileListData=[]
				}
				this.uploadKey++;  
			}
		}
	},
	computed: {
		action() {
			return configService.apiUrl + this.api
		}
	},
	mounted() {
		
	},
	beforeDestroy() {
		
	},
	methods: {
		afterRead(event, index, list) {
			this.$emit('loadIng', false);
			// url是组件的固定字段
			this.fileListData[index] = {
				...event,
				url: list[index].url
			};
			this.$emit('update:fileList', this.fileListData);
			this.$emit('complete', this.fileListData);
		},
		onRemove(index, lists) {
			this.fileListData.splice(index, 1);
			this.$emit('update:fileList', this.fileListData);
			this.$emit('complete', this.fileListData);
		},
		// onListChange早于onSuccess
		onListChange(lists) {
			// this.$emit('complete', lists);
		},
		// 手动上传
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.action,
					name: "file",
					header:{
						'AppType': '5',
						'X-Access-Token': uni.getStorageSync('token'),
					},
					filePath: url,
					// formData: {
					// 	user: "test",
					// },
					success: (res) => {
						uni.hideLoading();
						let data = JSON.parse(res.data);
						if (data.success) {
							resolve(data);
						} else {
							uni.showToast({
								icon: 'none',
								title: data.message || '文件导入失败',
							});
						}
					},
				});
			});
		},
		onChoose(){
			this.$emit('loadIng', true);
		}
	}
}
</script>

<style lang="scss" scoped>

</style>