FE_DQmini-code/components/pretty-uploadFile/pretty-uploadFile.vue

<template>
	<view>
		<!-- 上传文件 begin -->
		<view class="display_flex">
			<view class="img_list" v-for="(item,index) in fileList" :key="index">
				<image v-show="item.ext!=='mp4'" class="img_item" :src="item.url" @click="preview(item.url)" mode="aspectFill" v-if="item.book == 'img'"></image>
				<video object-fit="cover" @play="videoPlay" id="myVideo" @fullscreenchange="fullscreenchange" v-if="item.ext=='mp4'" class="img_item" :src="item.url" controls></video>
				<view :initial-time="0" play-btn-position="center" class="upload-video " @click="prePdf(item.url,item.ext)" v-else>
					<!-- <text class="iconfont iconexcel" style="color:#FF6969;font-size:88rpx"></text> -->
					<image v-show="item.ext == 'pdf'" src="../../static/img/PDF.png" mode="aspectFill" style="width:88rpx;height: 88rpx;"></image>
					<image v-show="item.ext == 'doc' || item.ext == 'docx'" src="../../static/img/word.png" mode="aspectFill" style="width:88rpx;height: 88rpx;"></image>
					<image v-show="item.ext == 'xlsx' || item.ext == 'xls'" src="../../static/img/excel.png" mode="aspectFill" style="width:88rpx;height: 88rpx;"></image>
				</view>
				<view v-if="handle" class="iconfont deleteicon iconshanchu2" @click.stop="delteFile(index)"></view>
			</view>
			<view v-if="handle" class="upload img_list" @click="upload('img')">
				<view v-if="handle" class="iconfont iconziyuan" style="font-size:40rpx;"></view>
				上传照片
			</view>
			<view v-if="handle" class="upload img_list" @click="upload('file')">
				<view v-if="handle" class="iconfont iconshangchuanwenjian fileicon"></view>
				上传文件
			</view>
		</view>
		<!-- 上传文件 end -->
	</view>
</template>

<script>	
	import {
		get,
		post
	} from '../utils/request.js'
	import {
		uploadImage,
		uploadPdf
	} from '../utils/uploadimage.js'
	import {
		previepdf
	} from '../utils/openpdf.js'
	export default {
		name: 'upload',
		model: {
			prop: "showPop",
			event: "change"
		},
		props: {
			limitnumber: {
				type: Number,
				default: 100
			},
			// 展示的文件
			files:{
				type:Array,
				default:[]
			},
			// 是否可操作
			handle:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				fileList: []
			}
		},
		watch:{
			files(val){
				if(val&&val.length!==0){
					this.fileList = val
					// 替傻屌后端擦屁股，返回特么的ul和“”
					if(val[0].url==''||val[0].url=='ul'){
						this.fileList.splice(0,1)
					}
				}
			}
		},
		
		methods: {
			/**
			 * @description 上传文件
			 */
			upload(book) {
				if (this.fileList.length == this.$props.limitnumber) {
					uni.showToast({
						title: '文件上传已上限',
						icon: 'none'
					})
					return
				}
				if (book == 'img') {
					uploadImage().then(res => {
						this.fileList.push({
							url: res.imageurl,
							ext: res.ext,
							book: 'img'
						})
						this.$emit('upload',this.fileList)
					})
				} else {
					uploadPdf().then(res => {
						this.fileList.push({
							url: res.pdfurl,
							ext: res.ext,
							book: 'file'
						})
						this.$emit('upload',this.fileList)
					})
				}
			},
			// 上传视频
			test() {
				var self = this;
				uni.chooseMedia({
				   count: 9,
				   mediaType: ['image','video'],
				   sourceType: ['album', 'camera'],
				   maxDuration: 30,
				   camera: 'back',
				   success(res) {
				     console.log(res.tempFilest,res,'选择图片或者视频')
				   }
				})
			},
			videoPlay(e){
				console.log(e,'播放触发')
				this.videoContext = uni.createVideoContext('myVideo',this)
				this.videoContext.requestFullScreen();
			},
			// 退出全屏播放时关闭生成的全屏视频
			fullscreenchange (e){
				console.log(e,'看下退出')
				if(!e.detail.fullScreen){
					this.videoContext.stop()
					e.timeStamp = 0 // 时间错归零
				}
			},
			/**
			 * @description 预览图片
			 */
			preview(url) {
				uni.previewImage({
					urls: [url],
					current: url
				})
			},
			/**
			 * @description 预览pdf
			 */
			
			prePdf(e,ext) {
					previepdf(e,ext)
				},
			/**
			 * @description 删除上传的文件
			 */
			delteFile(index) {
				this.fileList.splice(index, 1)
				this.$emit('upload',this.fileList)
			},
		}
	}
</script>

<style>
	@import "./pretty-uploadFile.css";

	.display_flex {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.fileicon {
		font-size: 50rpx;
	}

	/* 上传图片 */
	.img_list {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
		margin: 20rpx 10rpx;
		position: relative;
	}

	.img>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}

	.img_item {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}

	.upload {
		height: 140rpx;
		width: 140rpx;
		background-color: #f7f7f7;
		border: 2rpx dashed rgb(224, 223, 223);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #aaa;
		word-break: break-all;
		overflow: hidden;
	}
	.upload-video {
		height: 140rpx;
		width: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #aaa;
		word-break: break-all;
		overflow: hidden;
	}

	.deleteicon {
		position: absolute;
		font-size: 40rpx;
		color: #F93313;
		top: -20rpx;
		right: -12rpx;
		background-color: #fff;
		border-radius: 50%;
		z-index: 999;
	}
</style>