Delivery-merchant/components/ImgUploader.vue

<template>
	<u-upload :action="action" :file-list="fileList" max-count="1" :after-read="afterRead" @delete="deleteImg" preview-size="160" />
</template>

<script>
export default {
	props: {
		value: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			fileList: [],
			action: 'http://192.168.100.17/index.php/index/index/upload'
		};
	},
	created() {
		this.setFile(this.value);
	},
	methods: {
		setFile(value) {
			if (value) {
				this.fileList = [{ url: value }];
			} else {
				this.fileList = [];
			}
		},
		afterRead(file) {
			console.log(file)
			this.$http.uploadFile(file.path).then(res => {
				let fileList = [];
				fileList.push({ ...file, url: res });
				this.fileList = fileList;
				this.$emit('input', res);
			});
		},
		deleteImg() {
			this.fileList = [];
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-list-item {
	margin-left: 15px;
	width: 160px !important;
	height: 160px !important;
}
</style>