DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file2.vue

<template>
	<view>
		<view class="cu-form-group" style="border-bottom: none; padding-bottom: 0;">
		  <view class="title">
		    <text v-if="required" class="lr-required">*</text>
		    {{ title || '' }}
		  </view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view v-for="(item, index) in imgList" @tap="viewImg(item)" :key="index" class="bg-img">
					<image v-if="showfile()&&item&&(typeof item == 'string'||isImage(item.type))" :src="item.url?CONFIG('webHost') + item.url:item" mode="aspectFill">
					</image>
					<l-icon v-if="showfile()&&!isImage(item.type)" type="text" />
					<text class="file-name">{{item.name}}</text>
					<view v-if="!readonly" @tap.stop="delImg(index)" class="cu-tag bg-red"
						style="width: 18px; height: 18px; font-size: 24px">
						<l-icon type="close" style="width: 18px; height: 18px; font-size: 12px" />
					</view>
				</view>
		
				<view v-if="!readonly && imgList.length < Number(number)" @click="chooseFile" class="solids">
				  <l-icon type="file" />
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 附件上传组件
	 * 使用相机拍摄 和 从相册选图 
	 * 
	 * 注意：可以选择图片；如果选择文档的话则是从手机的‘文件管理’里面去选择，有可能会找不到文档；
	 */
	
	export default {

		props: {
			number: {
				default: 1
			},
			readonly: {},
			value: {
				default: () => []
			},
			folderId: {},
			title: {},
			required: false
		},

		data() {
			return {
				isShow: false,
				imgList: [],
			}
		},

		methods: {
			chooseFile() {
			  uni.chooseImage({
			    count: Number(this.number),
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album', 'camera'],
			    success: ({ tempFilePaths,tempFiles }) => {
					tempFilePaths.forEach((item, i) => {
						this.chooseChangeback(tempFilePaths[i],tempFiles[i])
					})
				  
			    }
			  })
			},
			delImg(index) {
				this.CONFIRM("", "是否确认删除？", true).then(res => {
					if(!res)return
					this.LOADING('正在删除…');
					const newList = JSON.parse(JSON.stringify(this.imgList));
					this.HTTP_POST('learun/adms/annexes/wxdelete', this.imgList[index].id, "文件删除失败").then((data) => {
						this.HIDE_LOADING();
						if (data) {
							newList.splice(index, 1);
							this.imgList = newList

							this.$emit("update:value", newList);
							this.$emit("input", newList);
							this.$emit("change");
							this.$emit("del");
						}
					})
				})

			},
			showfile() {
				return true;
			},

			async chooseChangeback(tempFilePaths, tempFiles) {
				// console.log(tempFilePaths,22)
				let uploadImageRes = await this.uploadImage(tempFilePaths, tempFiles ? tempFiles.name : "")
				let newList = this.imgList || []
				if (uploadImageRes) {
					//请求‘获取附件列表’接口
					let data =  await this.FETCH_FILEList(uploadImageRes);
					// console.log(data,33)
					if(data){
						newList = data.map(t=>({
							id: t.F_Id,
							name: t.F_FileName,
							url: t.F_FilePath.substring(t.F_FilePath.indexOf('Resource')),
							type: t.F_FileType,
							folderid:t.F_FolderId,
						}))
					}
				}

				this.imgList = newList

				this.$emit("update:value", newList);
				this.$emit("input", newList);
				this.$emit("change", newList);
			},

			uploadImage(url, name) {
				if (!url) return
				// 文件上传
				return new Promise(async (reslove, reject) => {
					this.LOADING('正在上传…');
					let params = name ? {
						folderId: this.folderId,
						name
					} : {
						folderId: this.folderId
					}
					this.HTTP_UPLOAD2('learun/adms/annexes/wxuploadinsingle', url, params).then((data) => {
						this.HIDE_LOADING();
						if (data) {
							reslove(data)
						} else {
							reject('上传失败！')
						}
					})
				})

			},
			validate(array) {
				// let type = array.every(item=>{
				// 	return item.type && item.type.substring(0,6) == "image/"
				// })
				// if(!type){
				// 	this.TOAST('文件类型错误');
				// 	return false
				// }
				let size = array.every(item => {
					return item.size && item.size <= 200 * 1024 * 1024
				})
				if (!size) {
					this.TOAST('文件大小不得超过200M');
					return false
				}
				return true
			},

			isImage(type) {
				if (type && type.length) {
					return ["png", "jpg"].includes(type.substring(type.length - 3, type.length))
				} else {
					return false
				}
			},

			viewImg(item) {
				if (!this.isImage(item.type)) {
					window.location.href = this.CONFIG("webHost") + item.url
				} else {
					uni.previewImage({
						urls: [this.CONFIG('webHost') + item.url],
						current: this.CONFIG('webHost') + item.url
					});
				}
			},
		},
		created() {
			// console.log(this.value)
			this.imgList = JSON.parse(JSON.stringify(this.value.map(item => {
				return {
					id: item.F_Id,
					name: item.F_FileName,
					url: item.F_FilePath.substring(item.F_FilePath.indexOf('Resource')),
					type: item.F_FileType,
					folderid:item.F_FolderId,
				}
			})))
			this.$nextTick(() => {
				this.isShow = true
			})
		}
	};
</script>

<style scoped>
	.file-name {
		position: absolute;
		bottom: 0;
		width: 100%;
		color: #606266;
		font-size: 12px;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.6);

		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>