fusions-ui 1.2.7 → 1.2.8

package/components/fu-upload/fu-upload.vue

@@ -1,563 +0,0 @@
-<template>
-	<view class="fu-upload">
-		<upload-image  
-			:readonly="readonly"
-			:imageStyles="imageStyles" 
-			:list="filesList" 
-			:disabled="disabled"
-			:disablePreview="disablePreview"
-			:delIcon="delIcon"
-			:showFileList="showFileList"
-			:maxCount="countLength"
-			@uploadFiles="uploadFiles" 
-			@choose="choose" 
-			@delFile="delFile" 
-			v-if="fileType === 'image' && showType === 'grid'">
-			<slot>
-				<view class="add-wrap">
-					<view class="add-wrap__icon-add"></view>
-					<view class="add-wrap__icon-add add-wrap__rotate"></view>
-				</view>
-			</slot>
-		</upload-image>
-		
-		<upload-file 
-			:readonly="readonly"
-			:listStyles="listStyles" 
-			:fileList="filesList" 
-			:delIcon="delIcon"
-			:maxCount="countLength"
-			:showFileList="showFileList"
-			@uploadFiles="uploadFiles" 
-			@choose="choose" 
-			@delFile="delFile" 
-			v-if="fileType !== 'image' || showType !== 'grid'">
-			<slot>
-				<button type="primary" size="mini">选择文件</button>
-			</slot>
-		</upload-file>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	import { chooseUploadFile, uploadCloudFiles } from '../../libs/function/chooseUploadFile.js'
-	import {
-		getExtname,
-		getFilesAndIsMax,
-		getFileData
-	} from './utils.js'
-	import uploadImage from './upload-image.vue'
-	import uploadFile from './upload-file.vue'
-	/**
-	 * Upload上传组件
-	 * @description Upload文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
-	 * @property {Array,Object}	value/modelValue 绑定数据，通常用来回显 ,类型由returnType属性决定
-	 * @property {Boolean} disabled = [true|false] 是否禁用（默认 false）
-	 * 	@value true 禁用
-	 * 	@value false 取消禁用
-	 * @property {Boolean} disablePreview = [true|false] 是否禁用图片预览功能，仅mode:grid时生效（默认 false）
-	 * 	@value true 禁用图片预览
-	 * 	@value false 取消禁用图片预览
-	 * @property {Boolean} delIcon = [true|false] 是否显示删除按钮（默认 true）
-	 * 	@value true 显示删除按钮
-	 * 	@value false 不显示删除按钮
-	 * @property {Boolean} autoUpload = [true|false] 是否自动上传，值为false则只触发@select，可自行上传（默认 false）
-	 * 	@value true 自动上传
-	 * 	@value false 取消自动上传
-	 * @property {String,Number} maxCount 最大选择个数，h5会自动忽略多选的部分（默认 9）
-	 * @property {String} fileType = [image|video|all] 选择文件类型，可选值：image/video/all；（默认 image）
-	 * 	@value image 只选择图片
-	 * 	@value video 只选择视频
-	 * 	@value all 选择所有文件
-	 * @property {String} mode = [list|grid] 选择文件后的文件列表样式，可选值：grid/list；（默认 grid）
-	 * 	@value list 列表显示
-	 * 	@value grid 宫格显示
-	 * @property {Array} fileExtname 选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 fileType 属性而不同
-	 * @property {Object} listStyles	定义列表样式，mode为list时的样式
-	 * @property {Object} imageStyles 自定义图片样式 选择文件后缀，根据 fileType 属性而不同
-	 * @property {Boolean} readonly = [true|false] 是否只读（默认 false）
-	 * @property {String} returnType = [array|object] 返回类型数据格式，当为 object 时，只能单选且会覆盖（默认 array）
-	 * 	@value object 对象
-	 * 	@value array 数组
-	 * @property {Array} sizeType original原图，compressed 压缩图，默认二者都有
-	 * @property {Array} sourceType album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项 
-	 * @property {String} camera = [front|back] 相机类型，仅fileType为video时生效，可选值：front/back；(默认 back)
-	 * 	@value front 前置
-	 * 	@value back 后置
-	 * @property {Boolean} compressed = [true|false] 是否压缩所选视频源文件，仅fileType为video时生效，(默认 true)
-	 * 	@value true 需要压缩
-	 * 	@value false 不需要压缩
-	 * @property {Boolean} showFileList = [true|false] 是否显示已上传的文件列表（默认 true）
-	 * 	@value true 显示列表
-	 * 	@value false 隐藏列表
-	 * 
-	 * @event {Function} select 选择文件后触发
-	 * @event {Function} progress 文件上传时触发
-	 * @event {Function} success 上传成功触发
-	 * @event {Function} fail 上传失败触发
-	 * @event {Function} delete 文件从列表移除时触发
-	 * @example <fu-upload></fu-upload>
-	 */
-	export default {
-		name:"FuUpload",
-		components: {
-			uploadImage,
-			uploadFile
-		},
-		emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
-		mixins: [mpMixin, props],
-		model: {
-			prop: 'modelValue',
-			event: 'update:modelValue'
-		},
-		data() {
-			return {
-				files: [],
-				localValue: []
-			};
-		},
-		created() {
-			// 兼容不开通服务空间的情况
-			if (!(uniCloud.config && uniCloud.config.provider)) {
-				this.noSpace = true;
-				uniCloud.chooseAndUploadFile = chooseUploadFile;
-			}
-			this.form = this.getForm('FuForm')
-			this.formItem = this.getForm('FuFormItem')
-			if (this.form && this.formItem) {
-				if (this.formItem.prop) {
-					this.prop = this.formItem.prop;
-					this.form.childrens.push(this)
-				}
-			}
-		},
-		computed: {
-			filesList() {
-				let files = []
-				this.files.forEach(item => {
-					files.push(item)
-				})
-				return files
-			},
-			showType() {
-				if (this.fileType === 'image') {
-					return this.mode
-				}
-				return 'list'
-			},
-			// 处理最大上传数量
-			countLength() {
-				if (this.returnType === 'object' || !this.maxCount) {
-					return 1
-				}
-				return Math.min(this.maxCount, 9)
-			}
-		},
-		methods: {
-			/**
-			 * 公开用户使用，清空文件
-			 * @param {Object} index
-			 */
-			clearFiles(index) {
-				if (index !== 0 && !index) {
-					this.files = [];
-					this.$nextTick(() => {
-						this.setEmit()
-					})
-				} else {
-					this.files.splice(index, 1)
-				}
-				this.$nextTick(() => {
-					this.setEmit()
-				})
-			},
-			
-			/**
-			 * 公开用户使用，继续上传
-			 */
-			upload() {
-				let files = [];
-				this.files.forEach((item, index) => {
-					if (item.status === 'ready' || item.status === 'error') {
-						files.push(Object.assign({}, item))
-					}
-				})
-				return this.uploadFiles(files)
-			},
-			
-			async setValue(newVal, oldVal) {
-				const newData =  async (item) => {
-					const reg = /cloud:\/\/([\w.]+\/?)\S*/;
-					let url = '';
-					if(item.fileID) {
-						url = item.fileID;
-					} else {
-						url = item.url;
-					}
-					if(reg.test(url)) {
-						item.fileID = url;
-						item.url = await this.getTempFileURL(url);
-					}
-					if(item.url) item.path = item.url;
-					return item
-				}
-				if (this.returnType === 'object') {
-					if (newVal) {
-						await newData(newVal)
-					} else {
-						newVal = {};
-					}
-				} else {
-					if (!newVal) newVal = [];
-					for(let i =0 ;i < newVal.length ;i++){
-						let item = newVal[i];
-						await newData(item)
-					}
-				}
-				this.localValue = newVal;
-				if (this.form && this.formItem &&!this.isReset) {
-					this.isReset = false;
-					this.form.setValue(this.prop, this.localValue)
-				}
-				let filesData = Object.keys(newVal).length > 0 ? newVal : [];
-				this.files = [].concat(filesData)
-			},
-			
-			/**
-			 * 选择文件
-			 */
-			choose() {
-				if (this.disabled) return
-				if (this.files.length >= Number(this.countLength) && this.showType !== 'grid' && this.returnType === 'array') {
-					uni.showToast({
-						title: `您最多选择 ${this.countLength} 个文件`,
-						icon: 'none'
-					})
-					return
-				}
-				this.chooseFiles()
-			},
-			
-			/**
-			 * 选择文件并上传
-			 */
-			chooseFiles() {
-				const _extname = getExtname(this.fileExtname);
-				// 获取后缀
-				uniCloud.chooseAndUploadFile({
-					type: this.fileType,
-					compressed: this.compressed,
-					sizeType: this.sizeType,
-					sourceType: this.sourceType,
-					// 如果为空，video 有问题
-					extension: _extname.length > 0 ? _extname : undefined,
-					count: this.countLength - this.files.length, // 默认9
-					onChooseFile: this.chooseFileCallback,
-					onUploadProgress: progressEvent => {
-						this.setProgress(progressEvent, progressEvent.index)
-					}
-				}).then(res => {
-					this.setSuccessAndError(res.tempFiles)
-				}).catch(err => {
-					console.log('选择失败', err)
-				})
-			},
-			
-			/**
-			 * 选择文件回调
-			 * @param {Object} res
-			 */
-			async chooseFileCallback(res) {
-				const _extname = getExtname(this.fileExtname);
-				const isOne = (Number(this.countLength) === 1 && this.disablePreview && !this.disabled) || this.returnType === 'object'
-				// 如果这有一个文件 ，需要清空本地缓存数据
-				if (isOne) {
-					this.files = [];
-				}
-			
-				let { filePaths, files } = getFilesAndIsMax(res, _extname)
-				if (!(_extname && _extname.length > 0)) {
-					filePaths = res.tempFilePaths;
-					files = res.tempFiles;
-				}
-			
-				let currentData = [];
-				for (let i = 0; i < files.length; i++) {
-					if (this.countLength - this.files.length <= 0) break
-					files[i].uuid = Date.now()
-					let filedata = await getFileData(files[i], this.fileType)
-					filedata.progress = 0;
-					filedata.status = 'ready';
-					this.files.push(filedata)
-					currentData.push({
-						...filedata,
-						file: files[i]
-					})
-				}
-				this.$emit('select', {
-					tempFiles: currentData,
-					tempFilePaths: filePaths
-				})
-				res.tempFiles = files;
-				// 停止自动上传
-				if (!this.autoUpload || this.noSpace) {
-					res.tempFiles = [];
-				}
-			},
-			
-			/**
-			 * 批量上传
-			 * @param {Object} files 上传数组
-			 * @param {String,Number} max 最大上传数量（默认 5）
-			 */
-			uploadFiles(files, max = 5) {
-				files = [].concat(files)
-				return uploadCloudFiles.call(this, files, max, res => {
-					this.setProgress(res, res.index, true)
-				}).then(result => {
-					this.setSuccessAndError(result)
-					return result;
-				}).catch(err => {
-					console.log(err)
-				})
-			},
-			
-			/**
-			 * 成功或失败
-			 */
-			async setSuccessAndError(res, fn) {
-				let successData = [];
-				let errorData = [];
-				let tempFilePath = [];
-				let errorTempFilePath = [];
-				for (let i = 0; i < res.length; i++) {
-					const item = res[i];
-					const index = item.uuid? this.files.findIndex(f => f.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;
-						errorData.push(this.files[index])
-						errorTempFilePath.push(this.files[index].url)
-					} else {
-						this.files[index].errMsg = '';
-						this.files[index].fileID = item.url;
-						const reg = /cloud:\/\/([\w.]+\/?)\S*/
-						if (reg.test(item.url)) {
-							this.files[index].url = await this.getTempFileURL(item.url)
-						}else{
-							this.files[index].url = item.url;
-						}
-						this.files[index].status = 'success';
-						this.files[index].progress += 1
-						successData.push(this.files[index])
-						tempFilePath.push(this.files[index].fileID)
-					}
-				}
-			
-				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
-					})
-				}
-			},
-			
-			/**
-			 * 获取文件URL
-			 * @param {Array} fileList
-			 */
-			async getTempFileURL(fileList) {
-				fileList = {
-					fileList: [].concat(fileList)
-				};
-				const urls = await uniCloud.getTempFileURL(fileList);
-				return urls.fileList[0].tempFileURL || ''
-			},
-			
-			/**
-			 * 获取进度
-			 * @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 _index = index;
-				if (!type) {
-					_index = this.files.findIndex(item => item.uuid === progressEvent.tempFile.uuid);
-				}
-				if (_index === -1 || !this.files[_index]) return
-				// 100 就会消失，-1 是为了让进度条消失
-				this.files[_index].progress = percentCompleted - 1;
-				// 上传中
-				this.$emit('progress', {
-					index: _index,
-					progress: parseInt(percentCompleted),
-					tempFile: this.files[_index]
-				})
-			},
-			
-			/**
-			 * 删除文件
-			 * @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 lastLen = name.lastIndexOf('.');
-				const len = name.length;
-				return {
-					name: name.substring(0, lastLen),
-					ext: name.substring(lastLen + 1, len)
-				}
-			},
-			
-			/**
-			 * 处理返回事件
-			 */
-			setEmit() {
-				let data = [];
-				if (this.returnType === 'object') {
-					data = this.backObject(this.files)[0];
-					this.localValue = data? data: null;
-				} else {
-					data = this.backObject(this.files);
-					if (!this.localValue) {
-						this.localValue = [];
-					}
-					this.localValue = [...data];
-				}
-				// #ifdef VUE3
-				this.$emit('update:modelValue', this.localValue)
-				// #endif
-				// #ifndef VUE3
-				this.$emit('input', this.localValue)
-				// #endif
-			},
-			
-			/**
-			 * 处理返回参数
-			 * @param {Object} files
-			 */
-			backObject(files) {
-				let newFilesData = [];
-				files.forEach(item => {
-					newFilesData.push({
-						extname: item.extname,
-						fileType: item.fileType,
-						image: item.image,
-						name: item.name,
-						path: item.path,
-						size: item.size,
-						fileID: item.fileID,
-						url: item.url,
-						// 修改删除一个文件后不能再上传的bug, #694
-						uuid: item.uuid,
-						status: item.status,
-						cloudPath: item.cloudPath
-					})
-				})
-				return newFilesData
-			},
-			
-			async getTempFileURL(fileList) {
-				fileList = {
-					fileList: [].concat(fileList)
-				};
-				const urls = await uniCloud.getTempFileURL(fileList);
-				return urls.fileList[0].tempFileURL || ''
-			},
-			
-			/**
-			 * 获取父元素实例
-			 */
-			getForm(name = 'FuForm') {
-				let parent = this.$parent;
-				let parentName = parent.$options.name;
-				while (parentName !== name) {
-					parent = parent.$parent;
-					if (!parent) return false;
-					parentName = parent.$options.name;
-				}
-				return parent;
-			}
-		},
-		watch: {
-			// #ifndef VUE3
-			value: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					this.setValue(newVal, oldVal)
-				}
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					this.setValue(newVal, oldVal)
-				}
-			},
-			// #endif
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	.fu-upload {
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		overflow: hidden;
-		width: 100%;
-		/* #endif */
-		flex: 1;
-	}
-	
-	.add-wrap {
-		@include flex;
-		align-items: center;
-		justify-content: center;
-		
-		&__icon-add {
-			width: 45px;
-			height: 4px;
-			background-color: #efefef;
-			border-radius: 2px;
-		}
-		
-		&__rotate {
-			position: absolute;
-			transform: rotate(90deg);
-		}
-	}
-</style>