chanyishenghuo-uniapp/components/uni-file-picker/uni-file-picker.vue

<template>
	<view class="uni-file-picker">
		<view v-if="title" class="uni-file-picker__header">
			<text class="file-title">{{ title }}</text>
			<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
		</view>
		<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly" :image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview" :delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
			<slot>
				<view class="is-add">
					<view class="icon-add"></view>
					<view class="icon-add rotate"></view>
				</view>
			</slot>
		</upload-image>
		<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly" :list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
			<slot><button type="primary" size="mini">选择文件</button></slot>
		</upload-file>
	</view>
</template>

<script>
	import uploadImage from './upload-image.vue'
	import uploadFile from './upload-file.vue'
	let fileInput = null
	/**
	 * FilePicker 文件选择上传
	 * @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=4079
	 * @property {Object|Array}	value	组件数据，通常用来回显 ,类型由return-type属性决定
	 * @property {Boolean}	disabled=[true|false]	组件禁用
	 * 	@value true 	禁用
	 * 	@value false 	取消禁用
	 * @property {Boolean}	readonly=[true|false]	组件只读，不可选择，不显示进度，不显示删除按钮
	 * 	@value true 	只读
	 * 	@value false 	取消只读
	 * @property {String}	return-type=[array|object]	限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
	 * 	@value array	规定 value 属性的类型为数组
	 * 	@value object	规定 value 属性的类型为对象
	 * @property {Boolean}	disable-preview=[true|false]	禁用图片预览，仅 mode:grid 时生效
	 * 	@value true 	禁用图片预览
	 * 	@value false 	取消禁用图片预览
	 * @property {Boolean}	del-icon=[true|false]	是否显示删除按钮
	 * 	@value true 	显示删除按钮
	 * 	@value false 	不显示删除按钮
	 * @property {Boolean}	auto-upload=[true|false]	是否自动上传，值为true则只触发@select,可自行上传
	 * 	@value true 	自动上传
	 * 	@value false 	取消自动上传
	 * @property {Number|String}	limit	最大选择个数 ，h5 会自动忽略多选的部分
	 * @property {String}	title	组件标题，右侧显示上传计数
	 * @property {String}	mode=[list|grid]	选择文件后的文件列表样式
	 * 	@value list 	列表显示
	 * 	@value grid 	宫格显示
	 * @property {String}	file-mediatype=[image|video|all]	选择文件类型
	 * 	@value image	只选择图片
	 * 	@value video	只选择视频
	 * 	@value all		选择所有文件
	 * @property {Array}	file-extname	选择文件后缀，根据 file-mediatype 属性而不同
	 * @property {Object}	list-style	mode:list 时的样式
	 * @property {Object}	image-styles	选择文件后缀，根据 file-mediatype 属性而不同
	 * @event {Function} select 	选择文件后触发
	 * @event {Function} progress 文件上传时触发
	 * @event {Function} success 	上传成功触发
	 * @event {Function} fail 		上传失败触发
	 * @event {Function} delete 	文件从列表移除时触发
	 */
	export default {
		name: 'uniFilePicker',
		components: {
			uploadImage,
			uploadFile
		},
		props: {
			value: {
				type: [Array, Object],
				default () {
					return []
				}
			},
			disabled: {
				type: Boolean,
				default: false
			},
			disablePreview: {
				type: Boolean,
				default: false
			},
			delIcon: {
				type: Boolean,
				default: true
			},
			// 自动上传
			autoUpload: {
				type: Boolean,
				default: true
			},
			// 最大选择个数 ，h5只能限制单选或是多选
			limit: {
				type: [Number, String],
				default: 9
			},
			// 列表样式 grid | list | list-card
			mode: {
				type: String,
				default: 'grid'
			},
			// inputUrl: {
			// 	type: Boolean,
			// 	default: false
			// },
			// 选择文件类型  image/video/all
			fileMediatype: {
				type: String,
				default: 'image'
			},
			// 文件类型筛选
			fileExtname: {
				type: [Array, String],
				default () {
					return []
				}
			},
			title: {
				type: String,
				default: ''
			},
			listStyles: {
				type: Object,
				default () {
					return {
						// 是否显示边框
						border: true,
						// 是否显示分隔线
						dividline: true,
						// 线条样式
						borderStyle: {}
					}
				}
			},
			imageStyles: {
				type: Object,
				default () {
					return {
						width: 'auto',
						height: 'auto'
					}
				}
			},
			readonly: {
				type: Boolean,
				default: false
			},
			returnType: {
				type: String,
				default: 'array'
			}
		},
		watch: {
			value: {
				handler(newVal) {
					let newFils = []
					let newData = [].concat(newVal || [])
					newData.forEach(v => {
						const files = this.files.find(i => i.url === v.url)
						const reg = /cloud:\/\/([\w.]+\/?)\S*/
						if (!v.path) {
							v.path = v.url
						}
						if (reg.test(v.url)) {
							this.getTempFileURL(v, v.url)
						}
						newFils.push(files ? files : v)
					})
					this.files = newFils
				},
				immediate: true
			}
		},
		data() {
			return {
				files: [],
			}
		},
		computed: {
			filesList() {
				let files = []
				this.files.forEach(v => {
					files.push(v)
				})
				return files
			},
			showType() {
				if (this.fileMediatype === 'image') {
					return this.mode
				}
				return 'list'
			},
			limitLength() {
				if (this.returnType === 'object') {
					return 1
				}
				if (!this.limit) {
					return 1
				}
				if (this.limit >= 9) {
					return 9
				}
				return this.limit
			},
			extname() {
				if (!Array.isArray(this.fileExtname)) {
					let extname = this.fileExtname.replace(/(\[|\])/g, '')
					return extname.split(',')
				} else {
					return this.fileExtname
				}
				return []
			}
		},
		created() {
			// this.files = Object.assign([], this.value)
			this.tempData = {}

		},
		methods: {
			/**
			 * 继续上传
			 */
			upload() {
				// TODO 先放弃这个实现 ，不能全部上传
				// if (this.$uploadFiles) {
				// 	this.$uploadFiles()
				// } else {
				// 	uni.showToast({
				// 		title: '请先选择文件',
				// 		icon: 'none'
				// 	})
				// }
				let files = []
				this.files.forEach((v, index) => {
					if (v.status === 'ready' || v.status === 'error') {
						files.push(Object.assign({}, v))
					}
				})

				this.uploadFiles(files)
			},
			/**
			 * 选择文件
			 */
			choose() {
				if (this.disabled) return
				if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType === 'array') {
					uni.showToast({
						title: `您最多选择 ${this.limitLength} 个文件`,
						icon: 'none'
					})
					return
				}
				// uni.showActionSheet({
				// 	itemList: ['填写 url 地址', '选择文件'],
				// 	success: (res) => {
				// 		if (res.tapIndex === 1) {
				// 			this.chooseFiles()
				// 		}
				// 	},
				// 	fail: function(res) {}
				// });
				this.chooseFiles()
			},

			/**
			 * 选择文件并上传
			 */
			chooseFiles() {

				uniCloud
					.chooseAndUploadFile({
						type: this.fileMediatype,
						compressed: false,
						// TODO 如果为空，video 有问题
						extension: this.extname.length > 0 ? this.extname : undefined,
						count: this.limitLength - this.files.length, //默认9
						onChooseFile: async res => {
							if ((Number(this.limitLength) === 1 && this.disablePreview && !this.disabled) || this.returnType === 'object') {
								this.files = []
							}
							let filePaths = []
							let files = []
							if (this.extname && this.extname.length > 0) {
								res.tempFiles.forEach(v => {
									let fileFullName = this.getFileExt(v.name)
									const extname = fileFullName.ext.toLowerCase()
									if (this.extname.indexOf(extname) !== -1) {
										files.push(v)
										filePaths.push(v.path)
									}
								})
								if (files.length !== res.tempFiles.length) {
									uni.showToast({
										title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`,
										icon: 'none',
										duration: 5000
									})
								}
							} else {
								filePaths = res.tempFilePaths
								files = res.tempFiles
							}

							let currentData = []
							for (let i = 0; i < files.length; i++) {
								if (this.limitLength - this.files.length <= 0) break
								files[i].uuid = Date.now()
								let filedata = await this.getFileData(files[i], this.fileMediatype)
								filedata.progress = 0
								filedata.status = 'ready'
								this.files.push(filedata)
								currentData.push(filedata)
							}
							this.$emit('select', {
								tempFiles: currentData,
								tempFilePaths: filePaths
							})
							res.tempFiles = files
							// 停止自动上传
							if (!this.autoUpload) {
								res.tempFiles = []
								// TODO 先放弃这个实现 ，不能全部上传
								// return new Promise((resolve) => {
								// 	this.$uploadFiles = () => {
								// 		// this._is_uploading = true
								// 		resolve(res)
								// 	}
								// })
							}
						},
						onUploadProgress: progressEvent => {
							this.setProgress(progressEvent, progressEvent.index)
						}
					})
					.then(result => {
						this.setSuccessAndError(result.tempFiles)
					})
					.catch(err => {
						console.log('选择失败', err)
					})
			},

			/**
			 * 批传
			 * @param {Object} e
			 */
			uploadFiles(files) {
				files = [].concat(files)
				this.uploadCloudFiles(files, 5, res => {
						this.setProgress(res, res.index, true)
					})
					.then(result => {
						this.setSuccessAndError(result)
					})
					.catch(err => {
						console.log('err', err)
					})
			},

			/**
			 * 成功或失败
			 */
			async setSuccessAndError(res, fn) {
				let successData = []
				let errorData = []
				let tempFilePath = []
				let errorTempFilePath = []
				for (let i = 0; i < res.length; i++) {
					// const index  = item.index
					const item = res[i]
					const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index
					if (index === -1 || !this.files) break
					if (item.errMsg === 'request:fail') {
						this.files[index].url = item.path
						this.files[index].status = 'error'
						this.files[index].errMsg = item.errMsg
						this.files[index].progress = -1
						errorData.push(this.files[index])
						errorTempFilePath.push(this.files[index].url)
					} else {
						this.files[index].errMsg = ''
						this.files[index].url = item.url
						this.files[index].status = 'success'
						successData.push(this.files[index])
						tempFilePath.push(this.files[index].url)
					}
				}

				if (successData.length > 0) {
					this.setEmit()
					// 状态改变返回
					this.$emit('success', {
						tempFiles: this.backObject(successData),
						tempFilePaths: tempFilePath
					})
				}

				if (errorData.length > 0) {
					this.$emit('fail', {
						tempFiles: this.backObject(errorData),
						tempFilePaths: errorTempFilePath
					})
				}
			},

			/**
			 * 获取进度
			 * @param {Object} progressEvent
			 * @param {Object} index
			 * @param {Object} type
			 */
			setProgress(progressEvent, index, type) {
				const fileLenth = this.files.length
				const percentNum = (index / fileLenth) * 100
				const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
				let idx = index
				if (!type) {
					idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid)
				}
				if (idx === -1 || !this.files[idx]) return
				this.files[idx].progress = percentCompleted
				// 上传中
				this.$emit('progress', {
					index: idx,
					progress: parseInt(percentCompleted),
					tempFile: this.files[idx]
				})
			},

			/**
			 * 删除
			 * @param {Object} index
			 */
			delFile(index) {
				this.$emit('delete', {
					tempFile: this.files[index],
					tempFilePath: this.files[index].url
				})
				this.files.splice(index, 1)
				this.$nextTick(() => {
					this.setEmit()
				})
			},

			/**
			 * 获取文件名和后缀
			 * @param {Object} name
			 */
			getFileExt(name) {
				const last_len = name.lastIndexOf('.')
				const len = name.length
				return {
					name: name.substring(0, last_len),
					ext: name.substring(last_len + 1, len)
				}
			},

			/**
			 * 获取图片信息
			 * @param {Object} filepath
			 */
			getFileInfo(filepath) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: filepath,
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},

			/**
			 * 获取封装数据
			 */
			async getFileData(files, type = 'image') {
				// 最终需要上传数据库的数据
				let fileFullName = this.getFileExt(files.name)
				const extname = fileFullName.ext.toLowerCase()
				let filedata = {
					name: files.name,
					uuid: files.uuid,
					extname: extname || '',
					cloudPath: files.cloudPath,
					fileType: files.fileType,
					url: files.path || files.path,
					size: files.size, //单位是字节
					image: {},
					path: files.path,
					video: {}
				}
				if (type === 'image') {
					const imageinfo = await this.getFileInfo(files.path)
					filedata.image.width = imageinfo.width
					filedata.image.height = imageinfo.height
					filedata.image.location = imageinfo.path
				}
				return filedata
			},

			/**
			 * 批量上传
			 */
			uploadCloudFiles(files, max = 5, onUploadProgress) {
				files = JSON.parse(JSON.stringify(files))
				const len = files.length
				let count = 0
				let self = this
				return new Promise(resolve => {
					while (count < max) {
						next()
					}

					function next() {
						let cur = count++
						if (cur >= len) {
							!files.find(item => !item.url && !item.errMsg) && resolve(files)
							return
						}
						const fileItem = files[cur]
						const index = self.files.findIndex(v => v.uuid === fileItem.uuid)
						fileItem.url = ''
						delete fileItem.errMsg

						uniCloud
							.uploadFile({
								filePath: fileItem.path,
								cloudPath: fileItem.cloudPath,
								fileType: fileItem.fileType,
								onUploadProgress: res => {
									res.index = index
									onUploadProgress && onUploadProgress(res)
								}
							})
							.then(res => {
								fileItem.url = res.fileID
								fileItem.index = index
								if (cur < len) {
									next()
								}
							})
							.catch(res => {
								fileItem.errMsg = res.errMsg || res.message
								fileItem.index = index
								if (cur < len) {
									next()
								}
							})
					}
				})
			},
			setEmit() {
				let data = []
				if (this.returnType === 'object') {
					data = this.backObject(this.files)[0]
				} else {
					data = this.backObject(this.files)
				}
				this.$emit('input', data)
			},
			backObject(files) {
				let newFilesData = JSON.parse(JSON.stringify(files))
				newFilesData.map(v => {
					delete v.path
					delete v.uuid
					delete v.video
					delete v.progress
					delete v.errMsg
					delete v.status
					delete v.cloudPath
					return v
				})
				return newFilesData
			},
			async getTempFileURL(file, fileList) {
				fileList = {
					fileList: [].concat(fileList)
				}
				const urls = await uniCloud.getTempFileURL(fileList)
				file.path = urls.fileList[0].tempFileURL || ''
				const index = this.files.findIndex(v => v.path === file.path)
				if (index !== -1) {
					this.$set(this.files, index, file)
				}
			}
		}
	}
</script>

<style scoped>
	.uni-file-picker {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		overflow: hidden;
		/* #endif */
	}

	.uni-file-picker__header {
		padding-top: 5px;
		padding-bottom: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: space-between;
	}

	.file-title {
		font-size: 14px;
		color: #333;
	}

	.file-count {
		font-size: 14px;
		color: #999;
	}

	.is-add {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.icon-add {
		width: 50px;
		height: 5px;
		background-color: #f1f1f1;
		border-radius: 2px;
	}

	.rotate {
		position: absolute;
		transform: rotate(90deg);
	}
</style>