jsh_erp_app/components/upload-image/upload-image.vue

<template>
	<view class="upload_box">
		<!-- #ifdef APP -->
		<template v-if="authList['WRITE_EXTERNAL_STORAGE']&&authList['CAMERA']">
			<u-upload
				:deletable="!isDetail"
				:fileList="fileList1"
				@afterRead="afterRead"
				@delete="deletePic"
				:name="name"
				:multiple="multiple"
				:maxCount="limit"
				:width="width"
				:height="height"
				:previewFullImage="true"
			>
				<view class="upload_btn">
					<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/contract/icon_increase1-2.png`"></u-image>
				</view>
			</u-upload>
		</template>
		<view v-else-if="!authList['WRITE_EXTERNAL_STORAGE']" class="upload_btn_auth" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">
			<view class="upload_btn">
				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/common/upload-img.png`"></u-image>
			</view>
		</view>
		<view v-else class="upload_btn_auth" @tap.stop="openAuth('CAMERA')">
			<view class="upload_btn">
				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/common/upload-img.png`"></u-image>
			</view>
		</view>
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
		<!-- #ifndef APP -->
		<u-upload
			:deletable="!isDetail"
			:fileList="fileList1"
			@afterRead="afterRead"
			@delete="deletePic"
			:name="name"
			:multiple="multiple"
			:maxCount="limit"
			:width="width"
			:height="height"
			:radius="radius"
			:previewFullImage="true"
		>
			<view class="upload_btn">
				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/common/upload-img.png`"></u-image>
			</view>
		</u-upload>
		<!-- #endif -->
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
export default {
	name: 'UploadImage',
	components: {
		ykAuthpup
	},
	props: {
		// 值
		value: [String, Object, Array],
		// 宽度
		width: {
			type: String,
			default: '180rpx'
		},
		// 高度
		height: {
			type: String,
			default: '180rpx'
		},
		// 圆角
		radius: {
			type: String,
			default: '12rpx'
		},
		// 数量限制
		limit: {
			type: Number,
			default: 9
		},
		// 大小限制(MB)
		fileSize: {
			type: Number,
			default: 20
		},
		// 文件类型, 例如['png', 'jpg', 'jpeg']
		fileType: {
			type: Array,
			default: () => []
		},
		// 标识name
		name: {
			type: String,
			default: '1'
		},
		// 是否多选
		multiple: {
			type: Boolean,
			default: true
		},
		// 是否显示提示
		isShowTip: {
			type: Boolean,
			default: false
		},
		// 是否详情
		isDetail: {
			type: Boolean,
			default: false
		},
		// 是否在上传的时候回显图片
		showImg: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			// 权限判断
			permissionID: '',
			fileList1: [] //图片上传的文件
		}
	},
	watch: {
		value: {
			async handler(val) {
				if (val) {
					if (this[`fileList${this.name}`].length > 0) return
					// 首先将值转为数组
					const list = Array.isArray(val) ? val : this.value.split(',')
					const files = []
					// 然后将数组转为对象数组
					for (let i = 0; i < list.length; i++) {
						let item = list[i]
						if (typeof item === 'string') {
							let name = item + ''
							item = {
								url: this.getUrl(item),
								fullurl: item,
								status: 'success'
							}
						}
						files.push(item)
					}
					this[`fileList${this.name}`] = files
				} else {
					this[`fileList${this.name}`] = []
					return []
				}
			},
			deep: true,
			immediate: true
		}
	},
	computed: {
		// 是否显示提示
		showTip() {
			return this.isShowTip && (this.fileType || this.fileSize)
		},
		...mapGetters('auth', ['authList', 'onceIn']),
	},
	mounted() {
		// #ifdef APP
		// if (this.onceIn) {
		// 	this.$store.commit('auth/edit', {data: false, index: 'onceIn'})
		// 	this.openAuth('WRITE_EXTERNAL_STORAGE')
		// }
		// #endif
	},
	methods: {
		//打开自定义权限目的弹框
		openAuth(permissionID) {
			this.permissionID = permissionID //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
			setTimeout(() => {
				this.$refs['authpup'].open()
			}, 500)
		},
		//用户授权权限后的回调
		changeAuth() {
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了')
			this.authList[this.permissionID] = true
			const list = {...this.authList}
			this.$store.commit('auth/edit', {data: list, index: 'authList'})
			if (!this.authList['CAMERA']) {
				this.openAuth('CAMERA')
			}
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
			const files = this[`fileList${event.name}`].length ? this[`fileList${event.name}`].map((item) => item.fullurl).join(',') : ''
			this.$emit('input', files)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			let successNum = 0
			let failNum = 0
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				if (result.code === 1) {
					successNum++
				} else {
					failNum++
				}
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: result.code === 1 ? 'success' : 'fail',
						message: result.code === 1 ? '' : '上传失败',
						url: result.code === 1 ? result.data.fullurl : '',
						fullurl: result.code === 1 ? result.data.url : ''
					})
				)
				fileListLen++
			}
			if(!this.showImg) {
				const files = this[`fileList${event.name}`].length ? this[`fileList${event.name}`][0] : ''
				this[`fileList${event.name}`] = []
				this.$emit('change',files)
				return
			}
			if (lists.length > 1) {
				uni.showModal({
					content: `本次上传成功${successNum}个，失败${failNum}个`,
					showCancel: false
				})
			}
			this[`fileList${event.name}`] = this[`fileList${event.name}`].filter((item) => item.status === 'success')
			const files = this[`fileList${event.name}`].length ? this[`fileList${event.name}`].map((item) => item.fullurl).join(',') : ''
			this.$emit('input', files)
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$UPLOAD_URL, //
					filePath: url,
					name: 'file',
					header: {
						token: `${this.$store.getters.token}`
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						resolve(data)
					}
				})
			})
		},
		// 设置域名
		getUrl(url) {
			if (url.indexOf('http') === -1) url = this.$UPLOAD_BASE + url
			return url
		}
	}
}
</script>

<style lang="scss" scoped>
.upload_box {
	position: relative;
	.upload_btn_auth {
		// width: 180rpx;
		// height: 180rpx;
	}
	.upload_btn {
		// width: 180rpx;
		// height: 180rpx;
		position: relative;
	}
}
</style>