aiot-app/pages/salesServiceManagement/workOrder/components/forWork/PhotoBtn.vue

<template>
	<view class="gzms-wrap">
		<view class="photo_btn" @click="chooseImage">拍照</view>
		<view class="photo_list">
			<PreviewPhoto type="add" @imagedelete="imagedelete" :imageList="imageList" />
		</view>
	</view>
</template>

<script>
	import PreviewPhoto from '@/pages/maintenance/check/components/PreviewPhoto.vue'
	export default {
		components: {
			PreviewPhoto
		},
		props: {
			imageUrl: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			imageUrl: {
				handler(newVal) {
					let arr = JSON.parse(JSON.stringify(newVal));
					this.imageList = arr;
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				imageList: [],
			}
		},
		methods: {
			imagedelete(index) {
				this.imageList.splice(index, 1);
			},
			getImageData() {
				return this.imageList || [];
			},
			// *** 新增拍照
			chooseImage() {
				const _this = this
				if (_this.imageList.length >= 9) {
					_this.$refs.uToast.show({
						type: "warning",
						message: "最多上传9张照片",
					})
					return
				}
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '上传中'
						})

						_this.uploadFile(res.tempFilePaths).then(res => {
							res.forEach(item => {
								let fileNames = item.storePath.split('/')
								let url = _this.apiUrl +
									'/main/file/getFile?objectName=' + item.storePath +
									'&fullfilename=' + fileNames[fileNames.length -
										1]
								let images = _this.imageList;
								// 不能存储超过 9 张
								if (images.length < 9) {
									_this.imageList.push(url);
								}
							})
							uni.hideLoading();
						}).catch((error) => {
							console.log(error, 'errorerrorerror')
							uni.hideLoading();
						})
					}
				});
			},
			uploadFile(list) {
				let PromiseAll = []
				const apiUrl = this.apiUrl
				const token = uni.getStorageSync("token"); //取存本地的token
				list.forEach(item => {
					PromiseAll.push(
						new Promise((resolve, reject) => {
							uni.uploadFile({
								url: apiUrl + '/main/file/upload',
								filePath: item,
								name: 'multiPartFile',
								header: {
									authorization: token
								},
								success: (uploadFileRes) => {
									if (uploadFileRes.statusCode == 500) {
										uni.hideLoading();
										return;
									}

									let data = JSON.parse(uploadFileRes.data)
									resolve(data.data)
								},
								fail: (err) => {
									console.log(err, '123456');
									// 上传请求本身失败（如网络问题等），直接 reject
									uni.hideLoading();
									reject(err)
								}
							});
						}),
					)
				})
				return Promise.all(PromiseAll)
			},
		}
	}
</script>

<style scoped lang="scss">
	.photo_btn {
		background-color: #157a2c;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		border-radius: 8rpx;
		margin-bottom: 12rpx;
		display: inline-block;
	}
</style>