ai.touchui-vue 1.30.2 → 1.30.4

package/packages/upload/src/upload.vue

@@ -1,860 +1,860 @@
-<template>
-	<div class="to-upload" :class="setClass" :style="setStyle">
-		<span v-if="verifiable && validateRequired" v-show="false" class="to-validate" :req="validateRequired" :desc="validateDesc" :value="validateValue"></span>
-		<form ref="upForm" encType="multipart/form-data"><input ref="fileInput" :accept="accept" type="file" :multiple="Number(maxLength) > 1" style="position:absolute;width:0px;height:0px;left:-99999px;top:-99999px;" @change="fileInputChange" /></form>
-		<to-input v-if="mode === 'input'" :class="setInputClass" :verifiable="false" type="html" width="full" v-bind="inputProps" :html="tipMessage">
-			<to-button icon="browse" mode="none" link color="primary" @click="browse"></to-button>
-			<to-button v-if="Object.keys(iFiles).length > 0 && !auto" icon="upload" mode="plain" link color="primary" @click="upload(iFiles)">{{ t('to.upload.button') }}</to-button>
-		</to-input>
-		<div v-if="mode === 'button'">
-			<to-button
-				v-size="buttonProps.size ? buttonProps.size : 1"
-				:icon="buttonProps.icon ? buttonProps.icon : 'upload'"
-				v-bind="buttonProps"
-				:class="setInputClass"
-				@click="browse"
-				>
-				{{ buttonProps.text ? buttonProps.text : t('to.upload.button') }}
-			</to-button>
-		</div>
-		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
-			<template v-if="errorType === 'rule'">
-				选择有误
-				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
-			</template>
-			<template v-else>
-				不能为空
-			</template>
-		</span>
-		<slot :oldFiles="finishedFiles" :files="iFiles">
-			<template v-if="mode === 'img'">
-				<div v-dis="vmDisabled" class="to-uploadImgGroup">
-					<template v-if="Object.keys(iFiles).length + finishedFiles.length > 0">
-						<div v-for="(file, index) in finishedFiles" :key="index" v-tip="picSize === 's' ? file.name :''" :style="file.iconClassName === 'img' ? { backgroundImage: `url(${file.fileObject.src})`} : ''" class="to-uploadImg" @click="openViewer(file,index,true)">
-							<div v-if="file.iconClassName !== 'img'" class="to-uploadFile">
-								<to-icon v-color="getColor(file.iconClassName)" :value="file.iconClassName" class="to-uploadFileIcon"></to-icon>
-								<span v-if="picSize !== 's'" class="to-uploadFileName">{{ file.name }}</span>
-							</div>
-							<div class="to-uploadFn">
-								<to-icon value="download" @click.stop="downloadFile(file)"></to-icon>
-								<to-icon value="delete" @click.stop="deleteOldFile(file[fileIdText])"></to-icon>
-							</div>
-						</div>
-						<div v-for="(file, index) in iFiles" :key="index" v-tip="picSize === 's' ? file.name :''" :style="file.iconClassName === 'img' ? { backgroundImage: `url(${file.fileObject.src})`} : ''" class="to-uploadImg" @click="openViewer(file,index,true)">
-							<div v-if="file.iconClassName !== 'img'" class="to-uploadFile">
-								<to-icon v-color="getColor(file.iconClassName)" :value="file.iconClassName" class="to-uploadFileIcon"></to-icon>
-								<span v-if="picSize !== 's'" class="to-uploadFileName">{{ file.name }}</span>
-							</div>
-							<span v-if="file.status === 1" class="to-uploadProgress to-progress to-progress-type-normal to-progress-fillet-pill">
-								<span class="to-progressBar" style="font-size:20%;">
-									<span class="to-progressProgress" :style="`width:${file.percent}%;`"></span>
-								</span>
-							</span>
-							<div v-if="file.status === 3" class="to-uploadError">{{ file.tipText }}</div>
-							<to-icon v-if="file.status === 2" class="to-uploadSuccess" value="ok"></to-icon>
-							<div class="to-uploadFn">
-								<to-icon v-if="file.status === 2 && downloadable" value="download" @click.stop="downloadFile(file)"></to-icon>
-								<to-icon value="delete" @click.stop="deleteFile(file)"></to-icon>
-							</div>
-						</div>
-					</template>
-					<div v-if="(Object.keys(iFiles).length + finishedFiles.length) < Number(maxLength)" class="to-uploadAdd" @click="browse">
-						<to-icon value="add"></to-icon>
-					</div>
-					<picViewer v-if="showViewer" :z-index="2000" :initial-index="imgIndex" :on-close="() => {showViewer = false}" :url-list="previewSrcList"></picViewer>
-				</div>
-				<template v-if="Object.keys(iFiles).length > 0 && !auto">
-					<to-space :value="0.5"></to-space>
-					<to-button icon="upload" mode="plain" link color="primary" @click="upload">{{ t('to.upload.button') }}</to-button>
-				</template>
-			</template>
-			<template v-else>
-				<template v-if="Object.keys(iFiles).length + finishedFiles.length > 0">
-					<to-space :value="0.5"></to-space>
-					<to-grid v-dis="vmDisabled" :col="1">
-						<to-grid-item v-for="(file, index) in finishedFiles" :key="index">
-							<to-card :padding="0.5">
-								<to-card-item><to-icon :value="file.iconClassName"></to-icon></to-card-item>
-								<to-card-item v-align="'left'" main>
-									<to-ellipsis tip :data="file.name"></to-ellipsis>
-								</to-card-item>
-								<to-card-item>
-									<span v-color="'info'">{{ file.tipText }}</span>
-								</to-card-item>
-								<to-card-item>
-									<to-icon fillet="round" color="primary" value="download" mode="none" link @click="downloadFile(file)"></to-icon>
-									<to-icon fillet="round" color="primary" value="delete" mode="none" link @click="deleteOldFile(file[fileIdText])"></to-icon>
-								</to-card-item>
-							</to-card>
-						</to-grid-item>
-						<to-grid-item v-for="file in iFiles" :key="file.guid" :ref="file.guid + '_li'">
-							<to-card :padding="0.5">
-								<to-card-item><to-icon :class="file.status !== 2 ?'to-dis':''" :value="file.iconClassName"></to-icon></to-card-item>
-								<to-card-item v-align="'left'" main>
-									<to-ellipsis tip :data="file.name"></to-ellipsis>
-								</to-card-item>
-								<to-card-item>
-									<span v-if="file.status === 3" class="to-color-danger">{{ file.tipText }}</span>
-								</to-card-item>
-								<to-card-item>
-									<to-icon v-if="file.status === 2" fillet="round" color="success" value="ok" mode="none"></to-icon>
-									<to-icon v-if="file.status === 2 && downloadable" fillet="round" color="primary" value="download" mode="none" link @click="downloadFile(file)"></to-icon>
-									<to-icon :class="file.status === 1?'to-dis':''" fillet="round" color="primary" value="delete" mode="none" link @click="deleteFile(file)"></to-icon>
-								</to-card-item>
-								<span v-if="file.status === 1" class="to-uploadProgress to-progress to-progress-type-normal to-progress-fillet-pill">
-									<span class="to-progressBar" style="font-size:20%;">
-										<span class="to-progressProgress" :style="`width:${file.percent}%;`"></span>
-									</span>
-								</span>
-							</to-card>
-						</to-grid-item>
-					</to-grid>
-				</template>
-			</template>
-		</slot>
-	</div>
-</template>
-<script>
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-import Tip from 'ai.touchui-vue/src/mixins/tip'
-import FileTransfer from 'ai.touchui-vue/src/utils/filetransfer'
-import { isString } from 'ai.touchui-vue/src/utils/types'
-import { md5 } from 'ai.touchui-vue/src/utils/md5'
-import { transferSign } from 'ai.touchui-vue/src/utils/sign'
-import picViewer from '../../pic/src/pic-viewer'
-import { t } from 'ai.touchui-vue/src/locale'
-import Vue from 'vue'
-const EXT = {
-	excel: ['.xls', '.xlsx', '.csv', '.XLS', '.XLSX', '.CSV'],
-	img: ['.png', '.jpg', '.gif', '.PNG', '.JPG', '.GIF'],
-	ppt: ['.ppt', '.pptx', '.ppsx', '.PPT', '.PPTX', '.PPSX'],
-	rar: ['.rar', '.zip', '.tar', '.gz', '.tgz', '.RAR', '.ZIP', '.TAR', '.GZ', '.TGZ'],
-	video: ['.rm', '.rmvb', '.avi', '.mkv', '.mp4', '.wmv', '.mov', '.movie', '.mpeg', '.mpg', '.qt', '.RM', '.RMVB', '.AVI', '.MKV', '.MP4', '.WMV', '.MOV', 'MOVIE', '.MPEG', '.MPG', '.QT'],
-	voice: ['.mp2', '.mp3', '.wma', '.midi', '.MP2', '.MP3', '.WMA', '.MIDI'],
-	word: ['.doc', '.docx', '.DOC', '.DOCX']
-}
-
-const ICON = {
-	excel: 'excel',
-	img: 'img',
-	ppt: 'ppt',
-	rar: 'rar',
-	video: 'video',
-	voice: 'voice',
-	word: 'word',
-	unknown: 'file'
-}
-
-export default {
-	name: 'ToUpload',
-	componentName: 'ToUpload',
-	components: {
-		picViewer
-	},
-	mixins: [Locale, Tip],
-	inject: {
-		ToForm: {
-			default: ''
-		},
-		ToFormItem: {
-			default: ''
-		}
-	},
-	props: {
-		// 表单校验
-		desc: {
-			type: String,
-			default: ''
-		},
-		id: {
-			type: String,
-			default: ''
-		},
-		required: Boolean,
-		// 模式，支持 input / button / img
-		mode: {
-			type: String,
-			default: 'input'
-		},
-		picSize: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.upload.fillet || this.$TouchUI.global.fillet || 'normal'
-			}
-		},
-		filletPosition: {
-			type: String,
-			default: ''
-		},
-		buttonProps: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		maxLength: {
-			type: [String, Number],
-			default: Infinity
-		},
-		accept: {
-			type: String,
-			default() {
-				if (this.mode === 'img') {
-					return '.jpg,.jpeg,.png,.gif'
-				} else {
-					return ''
-				}
-			}
-		},
-		maxSize: {
-			type: [String, Number],
-			default: ''
-		},
-		inputProps: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		fileRepeat: {
-			type: Boolean,
-			default: false
-		},
-		fileIdText: {
-			type: String,
-			default: 'fileId'
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		downloadable: {
-			type: Boolean,
-			default: false
-		},
-		name: {
-			type: String,
-			default: 'uploadfile'
-		},
-		action: {
-			type: String,
-			default: ''
-		},
-		headers: {
-			type: Object,
-			default: null
-		},
-		withCredentials: {
-			type: Boolean,
-			default: false
-		},
-		files: {
-			type: Array,
-			default: () => []
-		},
-		data: {
-			type: Object,
-			default: null
-		},
-		placeholder: {
-			type: String,
-			default: () => t('to.common.placeholder.select')
-		},
-		auto: Boolean,
-		beforeChange: {
-			type: Function,
-			default: null
-		},
-		beforeStart: {
-			type: Function,
-			default: null
-		},
-		verifiable: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			iApiHeaders: '',
-			errorTip: '',
-			errorType: 'rule',
-			imgIndex: 0,
-			showViewer: false,
-			iFiles: {},
-			finishedFiles: [],
-			queue: [],
-			transfers: {},
-			fileTypeList: [],
-			tipMessage: this.placeholder,
-			loading: false,
-			uploading: false,
-			vmDisabled: this.readonly || this.disabled
-		}
-	},
-	computed: {
-		previewSrcList() {
-			let arr = []
-			this.finishedFiles.map(file => {
-				if (file.path) {
-					arr.push(file.path)
-				}
-			})
-			for (const key in this.iFiles) {
-				const file = this.iFiles[key]
-				if (file.fileObject && file.fileObject.src) {
-					arr.push(file.fileObject.src)
-				}
-			}
-			return arr
-		},
-		setStyle() {
-			var obj = {}
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em'
-				} else if (this.width === 'full') {
-					obj.width = '100%'
-				} else {
-					obj.width = this.width
-				}
-			}
-			return obj
-		},
-		setClass() {
-			let arr = ['to-form-readonly']
-			if (this.mode !== 'input') {
-				arr.push(`to-upload-mode-${this.mode}`)
-			}
-			if (this.fillet !== 'none' && this.mode === 'img') {
-				arr.push(`to-upload-fillet-${this.fillet}`)
-			}
-			if (this.picSize) {
-				arr.push(`to-upload-pic-size-${this.picSize}`)
-			}
-			return arr
-		},
-		setInputClass() {
-			let arr = []
-			if (this.fillet !== 'none') {
-				arr.push(`to-input-fillet-${this.fillet}`)
-			}
-			if (this.filletPosition) {
-				arr.push(`to-input-fillet-position-${this.filletPosition}`)
-			}
-			if (this.errorTip) {
-				arr.push('to-input-mode-line')
-				arr.push('to-input-color-danger')
-			}
-			return arr
-		},
-		validateRequired() {
-			if (this.required) {
-				return 'true'
-			} else if (this.ToFormItem && this.ToFormItem.required) {
-				return 'true'
-			} else {
-				return 'false'
-			}
-		},
-		validateDesc() {
-			if (this.desc) {
-				return this.desc
-			} else if (this.ToFormItem && this.ToFormItem.label) {
-				return this.ToFormItem.label
-			} else {
-				return ''
-			}
-		},
-		validateValue() {
-			if (Object.keys(this.iFiles).length + this.finishedFiles.length > 0) {
-				return 'true'
-			} else {
-				return ''
-			}
-		}
-	},
-	watch: {
-		readonly(val) {
-			this.vmDisabled = val || this.disabled
-		},
-		disabled(val) {
-			this.vmDisabled = val || this.readonly
-		},
-		files: {
-			handler(val) {
-				if (val.length > 0) {
-					this.finishedFiles = []
-					val.map(file => {
-						if (file.name) {
-							file.iconClassName = this._fileIconClassName(file.name)
-						}
-						if (file.size) {
-							file.tipText = FileTransfer.humanSize(file.size)
-						}
-						this.finishedFiles.push(file)
-					})
-				}
-			},
-			immediate: true
-		}
-	},
-	beforeDestroy() {
-		if (this.iFiles) {
-			let file
-			for (let guid in this.iFiles) {
-				file = this.iFiles[guid]
-				for (let p in file) {
-					Vue.delete(file, p)
-				}
-				file.fileObject = null
-				Vue.delete(this.iFiles, guid)
-			}
-			file = null
-			this.iFiles = {}
-		}
-
-		if (this.transfers) {
-			for (let guid in this.transfers) {
-				this.transfers[guid].destroy()
-				Vue.delete(this.transfers, guid)
-			}
-			this.transfers = {}
-		}
-	},
-	created() {
-		this.iApiHeaders = this.headers
-	},
-	methods: {
-		openViewer(file, index, isNew) {
-			if (file.iconClassName !== 'img') return
-			if (isNew) {
-				this.imgIndex = this.finishedFiles.length + Object.keys(this.iFiles).indexOf(index)
-			} else {
-				this.imgIndex = index
-			}
-			this.showViewer = true
-		},
-		setTipMessage: function(message) {
-			if (typeof message !== 'undefined') {
-				this.tipMessage = message
-			}
-		},
-		deleteOldFile(fileId) {
-			if (!fileId) return
-			this.finishedFiles = this.finishedFiles.filter(file => { return file.fileId !== fileId })
-			this.$emit('delete', fileId)
-		},
-		updateTipFileInfo: function() {
-			let n = 0
-			let b = 0
-			for (let guid in this.iFiles) {
-				n++
-				if (this.iFiles[guid].valid === false) { b++ }
-			}
-
-			let tipInfo = this.t('to.upload.tip.selected', n)
-			if (b > 0) {
-				this.t('to.upload.tip.error.selected', tipInfo, b)
-			}
-
-			this.setTipMessage(tipInfo)
-		},
-		_fileIconClassName: function(name) {
-			let ext = name && isString(name) ? FileTransfer.extName(name) : null
-			if (ext) {
-				for (let type in EXT) {
-					if (Array.prototype.indexOf.call(EXT[type], ext) > -1) {
-						return ICON[type]
-					}
-				}
-			}
-			return ICON.unknown
-		},
-		_validateFileType: function(name) {
-			if (!this.fileTypeList || !this.fileTypeList.length) {
-				return true
-			}
-			let ext = FileTransfer.extName(name)
-			return (ext && isString(ext) && Array.prototype.indexOf.call(this.fileTypeList, ext) > -1) || undefined === ext
-		},
-		_fileObjGUID: function(fileObj) {
-			if (!fileObj) return
-
-			let str = (fileObj.lastModifiedDate ? fileObj.lastModifiedDate.valueOf() : fileObj.modificationdate) + fileObj.name + fileObj.size
-			return md5(str)
-		},
-		_addFile(fileObj) {
-			// IE: msClose
-			// Chrome: lastModified, webkitRelativePath
-			// ALL: lastModifiedDate, name, size, type,  slice
-			let name = fileObj.name
-			let size = fileObj.size
-
-			// 使用修改时间， 文件名和文件大小生成唯一标识，fileObj.modificationdate for swfupload
-			let guid = fileObj.guid ? fileObj.guid : this._fileObjGUID(fileObj)
-			let valid = true
-			let text = FileTransfer.humanSize(size)
-
-			// 判断文件类型
-			const nameArr = fileObj.name.split('.')
-			let fileType = nameArr[nameArr.length - 1]
-			if (this.accept && this.accept.indexOf(fileType) === -1) {
-				this.$tip.warning(this.t('to.upload.tip.error.format', this.accept))
-				return
-			}
-
-			// 单文件大小限制
-			if (this.maxSize) {
-				let maxSize
-				if (typeof this.maxSize === 'number') {
-					maxSize = this.maxSize
-				} else {
-					if (this.maxSize.indexOf('K') > -1) {
-						maxSize = Number(this.maxSize.replace('K', '')) * Math.pow(1024, 1)
-					} else if (this.maxSize.indexOf('k') > -1) {
-						maxSize = Number(this.maxSize.replace('k', '')) * Math.pow(1024, 1)
-					} else if (this.maxSize.indexOf('M') > -1) {
-						maxSize = Number(this.maxSize.replace('M', '')) * Math.pow(1024, 2)
-					} else if (this.maxSize.indexOf('m') > -1) {
-						maxSize = Number(this.maxSize.replace('m', '')) * Math.pow(1024, 2)
-					} else if (this.maxSize.indexOf('G') > -1) {
-						maxSize = Number(this.maxSize.replace('G', '')) * Math.pow(1024, 3)
-					} else if (this.maxSize.indexOf('g') > -1) {
-						maxSize = Number(this.maxSize.replace('g', '')) * Math.pow(1024, 3)
-					} else {
-						maxSize = Infinity
-					}
-				}
-				if (size > maxSize) {
-					this.$tip.warning(this.t('to.upload.tip.error.size', this.maxSize))
-					return
-				}
-			}
-
-			// 已经存在相同的文件, 由于使用guid作为key, 目前不能支持重复文件
-			if (this.fileRepeat === false && this.iFiles[guid]) {
-				return
-			}
-
-			// 校验文件名
-			if (!this._validateFileType(name)) {
-				valid = false
-				text += ' ' + this.t('to.upload.invalid-filetype')
-			}
-
-			if (valid && size > this.fileSize) {
-				valid = false
-				text += ' ' + this.t('to.upload.invalid-filesize')
-			}
-
-			// 判断文件个数限制
-			let files_num = Object.keys(this.iFiles).length
-			if (files_num + 1 + this.finishedFiles.length > Number(this.maxLength)) { // 超出文件限制直接返回
-				this.$tip.warning(this.t('to.upload.tip.error.count', this.maxLength))
-				return
-			}
-			let file = {
-				guid,
-				name,
-				size,
-				valid,
-				fileId: fileObj.fileId,
-				fileObject: fileObj,
-				tipText: text,
-				status: 0,
-				iconClassName: this._fileIconClassName(name)
-			}
-			this.$set(this.iFiles, guid, file)
-
-			if (this.$TouchUI.staticDataApiConfig.apiHeaders && !this.headers) {
-				this.iApiHeaders = this.$TouchUI.staticDataApiConfig.apiHeaders
-			}
-
-			if (valid) {
-				this.transfers[guid] = new FileTransfer({
-					context: this,
-					url: this.action,
-					data: this.data,
-					headers: Object.assign({}, this.iApiHeaders),
-					withCredentials: this.withCredentials,
-					fileField: this.name,
-					start: this._transferStart,
-					success: this._transferSuccess,
-					error: this._transferError,
-					init: function(settings, file) {
-						settings = transferSign(settings)
-					},
-					progress: function(e, file) {
-						this._transferProgress(e.loaded, e.total, file)
-					}
-				}, file)
-			}
-			return file
-		},
-		_removeFile(guid) {
-			if (!guid || this.queue.length > 0) return
-
-			let file = this.iFiles[guid]
-			if (file) {
-				// 发送删除文件请求
-				let transfer = this.transfers[guid]
-				if (transfer) {
-					transfer.destroy()
-					transfer = null
-				}
-
-				for (let p in file) {
-					Vue.delete(file, p)
-				}
-				Vue.delete(this.iFiles, guid)
-				file = null
-				this.$forceUpdate()
-			}
-
-			// 移除DOM
-			let refs = this.$refs[guid + '_li']
-			let el = refs && refs.length ? refs[0] : null
-			if (el && el.nodeType) {
-				el.parentNode.removeChild(el)
-			}
-
-			// 重置form
-			refs = this.$refs['upForm']
-			refs.reset()
-		},
-		deleteFile(file) {
-			if (!file.guid) return
-			if (file.fileId) {
-				this.$emit('delete', file.fileId)
-			} else if (file.guid) {
-				this.$emit('delete', file.guid)
-			}
-			this._removeFile(file.guid)
-			this.updateTipFileInfo()
-		},
-		downloadFile(file) {
-			if (file[this.fileIdText]) {
-				this.$emit('download', file[this.fileIdText])
-			} else {
-				this.$emit('download', file)
-			}
-		},
-		browse() {
-			this.errorTip = ''
-			if (this.vmDisabled) return
-			if (this.loading || this.queue.length > 0) { // 判断队列是否还有未完成上传
-				return
-			}
-			this.$refs['fileInput'].click()
-		},
-		fileInputChange(e) {
-			this.selectFile(e)
-		},
-		selectFile(e) {
-			if (this.beforeChange) {
-				const fn = this.beforeChange(e, this.iFiles, this.finishedFiles)
-				// 异步
-				if (fn && fn.then) {
-					fn.then(flag => {
-						this.selectFileAction()
-					})
-				} else {
-					// 是同步方法，则返回为 true 执行
-					if (fn) {
-						this.selectFileAction()
-					}
-				}
-			} else {
-				this.selectFileAction()
-			}
-		},
-		selectFileAction() {
-			if (this.vmDisabled) return
-			if (this.loading || this.queue.length > 0) {
-				return
-			}
-			let fileEl = this.$refs['fileInput']
-			if (fileEl.files) {
-				this.$emit('fileInputChange', fileEl.files)
-				this.$emit('change', fileEl.files)
-
-				for (let i = 0, size = fileEl.files.length; i < size; i++) {
-					let reader = []
-					if (this.mode === 'img') {
-						reader = new FileReader()
-						reader.addEventListener('load', () => {
-							fileEl.files[i].src = reader.result
-							this._addFile(fileEl.files[i])
-							this.updateTipFileInfo()
-							if (i === size - 1) {
-								this.$nextTick(() => {
-									if (this.auto) {
-										this.upload(fileEl.files[i])
-									}
-								})
-							}
-						}, false)
-						reader.readAsDataURL(fileEl.files[i])
-					} else {
-						this._addFile(fileEl.files[i])
-						this.updateTipFileInfo()
-						this.$nextTick(() => {
-							if (this.auto || this.mode === 'button') {
-								this.upload(fileEl.files[i])
-							}
-						})
-					}
-				}
-			}
-		},
-		handleUploadStart(iFiles) {
-			if (this.beforeStart) {
-				const fn = this.beforeStart(iFiles)
-				// 异步
-				if (fn && fn.then) {
-					fn.then(flag => {
-						this.uploadAction()
-					})
-				} else {
-					// 是同步方法，则返回为 true 执行
-					if (fn) {
-						this.uploadAction()
-					}
-				}
-			} else {
-				this.uploadAction()
-			}
-		},
-		uploadAction() {
-			// 调用onStart
-			this.$emit('start', this.iFiles)
-
-			if (this.vmDisabled || this.loading || this.queue.length > 0) {
-				return
-			}
-
-			let file, transfer
-			for (let guid in this.iFiles) {
-				file = this.iFiles[guid]
-				if (file.valid && !file.fileId && !file.finished && (transfer = this.transfers[guid])) { // 根据fileId判断是否已经完成上传
-					transfer.send()
-				}
-			}
-		},
-		upload(iFiles) {
-			this.handleUploadStart(iFiles)
-		},
-		clearClick() {
-			if (this.vmDisabled) return
-
-			// 清除已上传文件列表
-			for (var guid in this.iFiles) {
-				this._removeFile(guid)
-			}
-			this.finishedFiles = []
-
-			// 重置form
-			let refs = this.$refs['upForm']
-			refs.reset()
-
-			this.updateTipFileInfo()
-
-			this.$emit('clear', this.iFiles, this.popup)
-		},
-		_transferStart(file) {
-			if (!file.guid) return
-
-			this.queue.push(file.guid)
-
-			this.iFiles[file.guid].status = 1 // 1:start,2:success,3:error
-		},
-		_transferSuccess(data, status, file) {
-			if (!file) return
-			this.queue.splice(this.queue.indexOf(file.guid), 1)
-
-			this.iFiles[file.guid].status = 2 // 1:start,2:success,3:error
-			this.iFiles[file.guid].percent = 100
-
-			// 成功事件
-			file.finished = true
-
-			// 处理 fileId 为 undefined 的情况
-			if (!file.fileId) {
-				if (typeof data === 'string') {
-					file.fileId = data
-				}
-				if (typeof data === 'object') {
-					if (data.data && data.data['id']) {
-						file.fileId = data.data['id']
-					} else {
-						if (data['id']) {
-							file.fileId = data['id']
-						}
-						if (data['fileId']) {
-							file.fileId = data['fileId']
-						}
-					}
-				}
-			}
-			this.$emit('success', data, status, file)
-		},
-		_transferError(data, status, file) {
-			if (!file) return
-			this.queue.splice(this.queue.indexOf(file.guid), 1)
-
-			this.iFiles[file.guid].status = 3 // 1:start,2:success,3:error
-
-			this.iFiles[file.guid].tipText = data.message
-
-			// 错误事件
-			this.$emit('error', data, status, file)
-		},
-		_transferProgress(loaded, total, file) {
-			if (!file.guid) return
-			let percent
-
-			percent = loaded > 0 && total > 0 ? Math.round(loaded / total * 100) : 0
-			if (percent >= 100) percent = 99 // 由 success 事件处理进度条最终完成
-			this.iFiles[file.guid].percent = percent
-			// 	el .style.width = percent + '%';
-			// }
-
-			// 调用 progress
-			this.$emit('progress', loaded, total, file)
-		},
-		setDisabled(f) {
-			this.vmDisabled = f
-		},
-		getColor(icon) {
-			let color = ''
-			switch (icon) {
-				case 'word':
-					color = 'primary'
-					break
-				case 'excel':
-					color = 'success'
-					break
-				case 'ppt':
-					color = 'warning'
-					break
-				default:
-					break
-			}
-			return color
-		}
-	}
-}
-</script>
+<template>
+	<div class="to-upload" :class="setClass" :style="setStyle">
+		<span v-if="verifiable && validateRequired" v-show="false" class="to-validate" :req="validateRequired" :desc="validateDesc" :value="validateValue"></span>
+		<form ref="upForm" encType="multipart/form-data"><input ref="fileInput" :accept="accept" type="file" :multiple="Number(maxLength) > 1" style="position:absolute;width:0px;height:0px;left:-99999px;top:-99999px;" @change="fileInputChange" /></form>
+		<to-input v-if="mode === 'input'" :class="setInputClass" :verifiable="false" type="html" width="full" v-bind="inputProps" :html="tipMessage">
+			<to-button icon="browse" mode="none" link color="primary" @click="browse"></to-button>
+			<to-button v-if="Object.keys(iFiles).length > 0 && !auto" icon="upload" mode="plain" link color="primary" @click="upload(iFiles)">{{ t('to.upload.button') }}</to-button>
+		</to-input>
+		<div v-if="mode === 'button'">
+			<to-button
+				v-size="buttonProps.size ? buttonProps.size : 1"
+				:icon="buttonProps.icon ? buttonProps.icon : 'upload'"
+				v-bind="buttonProps"
+				:class="setInputClass"
+				@click="browse"
+				>
+				{{ buttonProps.text ? buttonProps.text : t('to.upload.button') }}
+			</to-button>
+		</div>
+		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
+			<template v-if="errorType === 'rule'">
+				选择有误
+				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
+			</template>
+			<template v-else>
+				不能为空
+			</template>
+		</span>
+		<slot :oldFiles="finishedFiles" :files="iFiles">
+			<template v-if="mode === 'img'">
+				<div v-dis="vmDisabled" class="to-uploadImgGroup">
+					<template v-if="Object.keys(iFiles).length + finishedFiles.length > 0">
+						<div v-for="(file, index) in finishedFiles" :key="index" v-tip="picSize === 's' ? file.name :''" :style="file.iconClassName === 'img' ? { backgroundImage: `url(${file.fileObject.src})`} : ''" class="to-uploadImg" @click="openViewer(file,index,true)">
+							<div v-if="file.iconClassName !== 'img'" class="to-uploadFile">
+								<to-icon v-color="getColor(file.iconClassName)" :value="file.iconClassName" class="to-uploadFileIcon"></to-icon>
+								<span v-if="picSize !== 's'" class="to-uploadFileName">{{ file.name }}</span>
+							</div>
+							<div class="to-uploadFn">
+								<to-icon value="download" @click.stop="downloadFile(file)"></to-icon>
+								<to-icon value="delete" @click.stop="deleteOldFile(file[fileIdText])"></to-icon>
+							</div>
+						</div>
+						<div v-for="(file, index) in iFiles" :key="index" v-tip="picSize === 's' ? file.name :''" :style="file.iconClassName === 'img' ? { backgroundImage: `url(${file.fileObject.src})`} : ''" class="to-uploadImg" @click="openViewer(file,index,true)">
+							<div v-if="file.iconClassName !== 'img'" class="to-uploadFile">
+								<to-icon v-color="getColor(file.iconClassName)" :value="file.iconClassName" class="to-uploadFileIcon"></to-icon>
+								<span v-if="picSize !== 's'" class="to-uploadFileName">{{ file.name }}</span>
+							</div>
+							<span v-if="file.status === 1" class="to-uploadProgress to-progress to-progress-type-normal to-progress-fillet-pill">
+								<span class="to-progressBar" style="font-size:20%;">
+									<span class="to-progressProgress" :style="`width:${file.percent}%;`"></span>
+								</span>
+							</span>
+							<div v-if="file.status === 3" class="to-uploadError">{{ file.tipText }}</div>
+							<to-icon v-if="file.status === 2" class="to-uploadSuccess" value="ok"></to-icon>
+							<div class="to-uploadFn">
+								<to-icon v-if="file.status === 2 && downloadable" value="download" @click.stop="downloadFile(file)"></to-icon>
+								<to-icon value="delete" @click.stop="deleteFile(file)"></to-icon>
+							</div>
+						</div>
+					</template>
+					<div v-if="(Object.keys(iFiles).length + finishedFiles.length) < Number(maxLength)" class="to-uploadAdd" @click="browse">
+						<to-icon value="add"></to-icon>
+					</div>
+					<picViewer v-if="showViewer" :z-index="2000" :initial-index="imgIndex" :on-close="() => {showViewer = false}" :url-list="previewSrcList"></picViewer>
+				</div>
+				<template v-if="Object.keys(iFiles).length > 0 && !auto">
+					<to-space :value="0.5"></to-space>
+					<to-button icon="upload" mode="plain" link color="primary" @click="upload">{{ t('to.upload.button') }}</to-button>
+				</template>
+			</template>
+			<template v-else>
+				<template v-if="Object.keys(iFiles).length + finishedFiles.length > 0">
+					<to-space :value="0.5"></to-space>
+					<to-grid v-dis="vmDisabled" :col="1">
+						<to-grid-item v-for="(file, index) in finishedFiles" :key="index">
+							<to-card :padding="0.5">
+								<to-card-item><to-icon :value="file.iconClassName"></to-icon></to-card-item>
+								<to-card-item v-align="'left'" main>
+									<to-ellipsis tip :data="file.name"></to-ellipsis>
+								</to-card-item>
+								<to-card-item>
+									<span v-color="'info'">{{ file.tipText }}</span>
+								</to-card-item>
+								<to-card-item>
+									<to-icon fillet="round" color="primary" value="download" mode="none" link @click="downloadFile(file)"></to-icon>
+									<to-icon fillet="round" color="primary" value="delete" mode="none" link @click="deleteOldFile(file[fileIdText])"></to-icon>
+								</to-card-item>
+							</to-card>
+						</to-grid-item>
+						<to-grid-item v-for="file in iFiles" :key="file.guid" :ref="file.guid + '_li'">
+							<to-card :padding="0.5">
+								<to-card-item><to-icon :class="file.status !== 2 ?'to-dis':''" :value="file.iconClassName"></to-icon></to-card-item>
+								<to-card-item v-align="'left'" main>
+									<to-ellipsis tip :data="file.name"></to-ellipsis>
+								</to-card-item>
+								<to-card-item>
+									<span v-if="file.status === 3" class="to-color-danger">{{ file.tipText }}</span>
+								</to-card-item>
+								<to-card-item>
+									<to-icon v-if="file.status === 2" fillet="round" color="success" value="ok" mode="none"></to-icon>
+									<to-icon v-if="file.status === 2 && downloadable" fillet="round" color="primary" value="download" mode="none" link @click="downloadFile(file)"></to-icon>
+									<to-icon :class="file.status === 1?'to-dis':''" fillet="round" color="primary" value="delete" mode="none" link @click="deleteFile(file)"></to-icon>
+								</to-card-item>
+								<span v-if="file.status === 1" class="to-uploadProgress to-progress to-progress-type-normal to-progress-fillet-pill">
+									<span class="to-progressBar" style="font-size:20%;">
+										<span class="to-progressProgress" :style="`width:${file.percent}%;`"></span>
+									</span>
+								</span>
+							</to-card>
+						</to-grid-item>
+					</to-grid>
+				</template>
+			</template>
+		</slot>
+	</div>
+</template>
+<script>
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+import Tip from 'ai.touchui-vue/src/mixins/tip'
+import FileTransfer from 'ai.touchui-vue/src/utils/filetransfer'
+import { isString } from 'ai.touchui-vue/src/utils/types'
+import { md5 } from 'ai.touchui-vue/src/utils/md5'
+import { transferSign } from 'ai.touchui-vue/src/utils/sign'
+import picViewer from '../../pic/src/pic-viewer'
+import { t } from 'ai.touchui-vue/src/locale'
+import Vue from 'vue'
+const EXT = {
+	excel: ['.xls', '.xlsx', '.csv', '.XLS', '.XLSX', '.CSV'],
+	img: ['.png', '.jpg', '.gif', '.PNG', '.JPG', '.GIF'],
+	ppt: ['.ppt', '.pptx', '.ppsx', '.PPT', '.PPTX', '.PPSX'],
+	rar: ['.rar', '.zip', '.tar', '.gz', '.tgz', '.RAR', '.ZIP', '.TAR', '.GZ', '.TGZ'],
+	video: ['.rm', '.rmvb', '.avi', '.mkv', '.mp4', '.wmv', '.mov', '.movie', '.mpeg', '.mpg', '.qt', '.RM', '.RMVB', '.AVI', '.MKV', '.MP4', '.WMV', '.MOV', 'MOVIE', '.MPEG', '.MPG', '.QT'],
+	voice: ['.mp2', '.mp3', '.wma', '.midi', '.MP2', '.MP3', '.WMA', '.MIDI'],
+	word: ['.doc', '.docx', '.DOC', '.DOCX']
+}
+
+const ICON = {
+	excel: 'excel',
+	img: 'img',
+	ppt: 'ppt',
+	rar: 'rar',
+	video: 'video',
+	voice: 'voice',
+	word: 'word',
+	unknown: 'file'
+}
+
+export default {
+	name: 'ToUpload',
+	componentName: 'ToUpload',
+	components: {
+		picViewer
+	},
+	mixins: [Locale, Tip],
+	inject: {
+		ToForm: {
+			default: ''
+		},
+		ToFormItem: {
+			default: ''
+		}
+	},
+	props: {
+		// 表单校验
+		desc: {
+			type: String,
+			default: ''
+		},
+		id: {
+			type: String,
+			default: ''
+		},
+		required: Boolean,
+		// 模式，支持 input / button / img
+		mode: {
+			type: String,
+			default: 'input'
+		},
+		picSize: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.upload.fillet || this.$TouchUI.global.fillet || 'normal'
+			}
+		},
+		filletPosition: {
+			type: String,
+			default: ''
+		},
+		buttonProps: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		maxLength: {
+			type: [String, Number],
+			default: Infinity
+		},
+		accept: {
+			type: String,
+			default() {
+				if (this.mode === 'img') {
+					return '.jpg,.jpeg,.png,.gif'
+				} else {
+					return ''
+				}
+			}
+		},
+		maxSize: {
+			type: [String, Number],
+			default: ''
+		},
+		inputProps: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		fileRepeat: {
+			type: Boolean,
+			default: false
+		},
+		fileIdText: {
+			type: String,
+			default: 'fileId'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		downloadable: {
+			type: Boolean,
+			default: false
+		},
+		name: {
+			type: String,
+			default: 'uploadfile'
+		},
+		action: {
+			type: String,
+			default: ''
+		},
+		headers: {
+			type: Object,
+			default: null
+		},
+		withCredentials: {
+			type: Boolean,
+			default: false
+		},
+		files: {
+			type: Array,
+			default: () => []
+		},
+		data: {
+			type: Object,
+			default: null
+		},
+		placeholder: {
+			type: String,
+			default: () => t('to.common.placeholder.select')
+		},
+		auto: Boolean,
+		beforeChange: {
+			type: Function,
+			default: null
+		},
+		beforeStart: {
+			type: Function,
+			default: null
+		},
+		verifiable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			iApiHeaders: '',
+			errorTip: '',
+			errorType: 'rule',
+			imgIndex: 0,
+			showViewer: false,
+			iFiles: {},
+			finishedFiles: [],
+			queue: [],
+			transfers: {},
+			fileTypeList: [],
+			tipMessage: this.placeholder,
+			loading: false,
+			uploading: false,
+			vmDisabled: this.readonly || this.disabled
+		}
+	},
+	computed: {
+		previewSrcList() {
+			let arr = []
+			this.finishedFiles.map(file => {
+				if (file.path) {
+					arr.push(file.path)
+				}
+			})
+			for (const key in this.iFiles) {
+				const file = this.iFiles[key]
+				if (file.fileObject && file.fileObject.src) {
+					arr.push(file.fileObject.src)
+				}
+			}
+			return arr
+		},
+		setStyle() {
+			var obj = {}
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em'
+				} else if (this.width === 'full') {
+					obj.width = '100%'
+				} else {
+					obj.width = this.width
+				}
+			}
+			return obj
+		},
+		setClass() {
+			let arr = ['to-form-readonly']
+			if (this.mode !== 'input') {
+				arr.push(`to-upload-mode-${this.mode}`)
+			}
+			if (this.fillet !== 'none' && this.mode === 'img') {
+				arr.push(`to-upload-fillet-${this.fillet}`)
+			}
+			if (this.picSize) {
+				arr.push(`to-upload-pic-size-${this.picSize}`)
+			}
+			return arr
+		},
+		setInputClass() {
+			let arr = []
+			if (this.fillet !== 'none') {
+				arr.push(`to-input-fillet-${this.fillet}`)
+			}
+			if (this.filletPosition) {
+				arr.push(`to-input-fillet-position-${this.filletPosition}`)
+			}
+			if (this.errorTip) {
+				arr.push('to-input-mode-line')
+				arr.push('to-input-color-danger')
+			}
+			return arr
+		},
+		validateRequired() {
+			if (this.required) {
+				return 'true'
+			} else if (this.ToFormItem && this.ToFormItem.required) {
+				return 'true'
+			} else {
+				return 'false'
+			}
+		},
+		validateDesc() {
+			if (this.desc) {
+				return this.desc
+			} else if (this.ToFormItem && this.ToFormItem.label) {
+				return this.ToFormItem.label
+			} else {
+				return ''
+			}
+		},
+		validateValue() {
+			if (Object.keys(this.iFiles).length + this.finishedFiles.length > 0) {
+				return 'true'
+			} else {
+				return ''
+			}
+		}
+	},
+	watch: {
+		readonly(val) {
+			this.vmDisabled = val || this.disabled
+		},
+		disabled(val) {
+			this.vmDisabled = val || this.readonly
+		},
+		files: {
+			handler(val) {
+				if (val.length > 0) {
+					this.finishedFiles = []
+					val.map(file => {
+						if (file.name) {
+							file.iconClassName = this._fileIconClassName(file.name)
+						}
+						if (file.size) {
+							file.tipText = FileTransfer.humanSize(file.size)
+						}
+						this.finishedFiles.push(file)
+					})
+				}
+			},
+			immediate: true
+		}
+	},
+	beforeDestroy() {
+		if (this.iFiles) {
+			let file
+			for (let guid in this.iFiles) {
+				file = this.iFiles[guid]
+				for (let p in file) {
+					Vue.delete(file, p)
+				}
+				file.fileObject = null
+				Vue.delete(this.iFiles, guid)
+			}
+			file = null
+			this.iFiles = {}
+		}
+
+		if (this.transfers) {
+			for (let guid in this.transfers) {
+				this.transfers[guid].destroy()
+				Vue.delete(this.transfers, guid)
+			}
+			this.transfers = {}
+		}
+	},
+	created() {
+		this.iApiHeaders = this.headers
+	},
+	methods: {
+		openViewer(file, index, isNew) {
+			if (file.iconClassName !== 'img') return
+			if (isNew) {
+				this.imgIndex = this.finishedFiles.length + Object.keys(this.iFiles).indexOf(index)
+			} else {
+				this.imgIndex = index
+			}
+			this.showViewer = true
+		},
+		setTipMessage: function(message) {
+			if (typeof message !== 'undefined') {
+				this.tipMessage = message
+			}
+		},
+		deleteOldFile(fileId) {
+			if (!fileId) return
+			this.finishedFiles = this.finishedFiles.filter(file => { return file.fileId !== fileId })
+			this.$emit('delete', fileId)
+		},
+		updateTipFileInfo: function() {
+			let n = 0
+			let b = 0
+			for (let guid in this.iFiles) {
+				n++
+				if (this.iFiles[guid].valid === false) { b++ }
+			}
+
+			let tipInfo = this.t('to.upload.tip.selected', n)
+			if (b > 0) {
+				this.t('to.upload.tip.error.selected', tipInfo, b)
+			}
+
+			this.setTipMessage(tipInfo)
+		},
+		_fileIconClassName: function(name) {
+			let ext = name && isString(name) ? FileTransfer.extName(name) : null
+			if (ext) {
+				for (let type in EXT) {
+					if (Array.prototype.indexOf.call(EXT[type], ext) > -1) {
+						return ICON[type]
+					}
+				}
+			}
+			return ICON.unknown
+		},
+		_validateFileType: function(name) {
+			if (!this.fileTypeList || !this.fileTypeList.length) {
+				return true
+			}
+			let ext = FileTransfer.extName(name)
+			return (ext && isString(ext) && Array.prototype.indexOf.call(this.fileTypeList, ext) > -1) || undefined === ext
+		},
+		_fileObjGUID: function(fileObj) {
+			if (!fileObj) return
+
+			let str = (fileObj.lastModifiedDate ? fileObj.lastModifiedDate.valueOf() : fileObj.modificationdate) + fileObj.name + fileObj.size
+			return md5(str)
+		},
+		_addFile(fileObj) {
+			// IE: msClose
+			// Chrome: lastModified, webkitRelativePath
+			// ALL: lastModifiedDate, name, size, type,  slice
+			let name = fileObj.name
+			let size = fileObj.size
+
+			// 使用修改时间， 文件名和文件大小生成唯一标识，fileObj.modificationdate for swfupload
+			let guid = fileObj.guid ? fileObj.guid : this._fileObjGUID(fileObj)
+			let valid = true
+			let text = FileTransfer.humanSize(size)
+
+			// 判断文件类型
+			const nameArr = fileObj.name.split('.')
+			let fileType = nameArr[nameArr.length - 1]
+			if (this.accept && this.accept.indexOf(fileType) === -1) {
+				this.$tip.warning(this.t('to.upload.tip.error.format', this.accept))
+				return
+			}
+
+			// 单文件大小限制
+			if (this.maxSize) {
+				let maxSize
+				if (typeof this.maxSize === 'number') {
+					maxSize = this.maxSize
+				} else {
+					if (this.maxSize.indexOf('K') > -1) {
+						maxSize = Number(this.maxSize.replace('K', '')) * Math.pow(1024, 1)
+					} else if (this.maxSize.indexOf('k') > -1) {
+						maxSize = Number(this.maxSize.replace('k', '')) * Math.pow(1024, 1)
+					} else if (this.maxSize.indexOf('M') > -1) {
+						maxSize = Number(this.maxSize.replace('M', '')) * Math.pow(1024, 2)
+					} else if (this.maxSize.indexOf('m') > -1) {
+						maxSize = Number(this.maxSize.replace('m', '')) * Math.pow(1024, 2)
+					} else if (this.maxSize.indexOf('G') > -1) {
+						maxSize = Number(this.maxSize.replace('G', '')) * Math.pow(1024, 3)
+					} else if (this.maxSize.indexOf('g') > -1) {
+						maxSize = Number(this.maxSize.replace('g', '')) * Math.pow(1024, 3)
+					} else {
+						maxSize = Infinity
+					}
+				}
+				if (size > maxSize) {
+					this.$tip.warning(this.t('to.upload.tip.error.size', this.maxSize))
+					return
+				}
+			}
+
+			// 已经存在相同的文件, 由于使用guid作为key, 目前不能支持重复文件
+			if (this.fileRepeat === false && this.iFiles[guid]) {
+				return
+			}
+
+			// 校验文件名
+			if (!this._validateFileType(name)) {
+				valid = false
+				text += ' ' + this.t('to.upload.invalid-filetype')
+			}
+
+			if (valid && size > this.fileSize) {
+				valid = false
+				text += ' ' + this.t('to.upload.invalid-filesize')
+			}
+
+			// 判断文件个数限制
+			let files_num = Object.keys(this.iFiles).length
+			if (files_num + 1 + this.finishedFiles.length > Number(this.maxLength)) { // 超出文件限制直接返回
+				this.$tip.warning(this.t('to.upload.tip.error.count', this.maxLength))
+				return
+			}
+			let file = {
+				guid,
+				name,
+				size,
+				valid,
+				fileId: fileObj.fileId,
+				fileObject: fileObj,
+				tipText: text,
+				status: 0,
+				iconClassName: this._fileIconClassName(name)
+			}
+			this.$set(this.iFiles, guid, file)
+
+			if (this.$TouchUI.staticDataApiConfig.apiHeaders && !this.headers) {
+				this.iApiHeaders = this.$TouchUI.staticDataApiConfig.apiHeaders
+			}
+
+			if (valid) {
+				this.transfers[guid] = new FileTransfer({
+					context: this,
+					url: this.action,
+					data: this.data,
+					headers: Object.assign({}, this.iApiHeaders),
+					withCredentials: this.withCredentials,
+					fileField: this.name,
+					start: this._transferStart,
+					success: this._transferSuccess,
+					error: this._transferError,
+					init: function(settings, file) {
+						settings = transferSign(settings)
+					},
+					progress: function(e, file) {
+						this._transferProgress(e.loaded, e.total, file)
+					}
+				}, file)
+			}
+			return file
+		},
+		_removeFile(guid) {
+			if (!guid || this.queue.length > 0) return
+
+			let file = this.iFiles[guid]
+			if (file) {
+				// 发送删除文件请求
+				let transfer = this.transfers[guid]
+				if (transfer) {
+					transfer.destroy()
+					transfer = null
+				}
+
+				for (let p in file) {
+					Vue.delete(file, p)
+				}
+				Vue.delete(this.iFiles, guid)
+				file = null
+				this.$forceUpdate()
+			}
+
+			// 移除DOM
+			let refs = this.$refs[guid + '_li']
+			let el = refs && refs.length ? refs[0] : null
+			if (el && el.nodeType) {
+				el.parentNode.removeChild(el)
+			}
+
+			// 重置form
+			refs = this.$refs['upForm']
+			refs.reset()
+		},
+		deleteFile(file) {
+			if (!file.guid) return
+			if (file.fileId) {
+				this.$emit('delete', file.fileId)
+			} else if (file.guid) {
+				this.$emit('delete', file.guid)
+			}
+			this._removeFile(file.guid)
+			this.updateTipFileInfo()
+		},
+		downloadFile(file) {
+			if (file[this.fileIdText]) {
+				this.$emit('download', file[this.fileIdText])
+			} else {
+				this.$emit('download', file)
+			}
+		},
+		browse() {
+			this.errorTip = ''
+			if (this.vmDisabled) return
+			if (this.loading || this.queue.length > 0) { // 判断队列是否还有未完成上传
+				return
+			}
+			this.$refs['fileInput'].click()
+		},
+		fileInputChange(e) {
+			this.selectFile(e)
+		},
+		selectFile(e) {
+			if (this.beforeChange) {
+				const fn = this.beforeChange(e, this.iFiles, this.finishedFiles)
+				// 异步
+				if (fn && fn.then) {
+					fn.then(flag => {
+						this.selectFileAction()
+					})
+				} else {
+					// 是同步方法，则返回为 true 执行
+					if (fn) {
+						this.selectFileAction()
+					}
+				}
+			} else {
+				this.selectFileAction()
+			}
+		},
+		selectFileAction() {
+			if (this.vmDisabled) return
+			if (this.loading || this.queue.length > 0) {
+				return
+			}
+			let fileEl = this.$refs['fileInput']
+			if (fileEl.files) {
+				this.$emit('fileInputChange', fileEl.files)
+				this.$emit('change', fileEl.files)
+
+				for (let i = 0, size = fileEl.files.length; i < size; i++) {
+					let reader = []
+					if (this.mode === 'img') {
+						reader = new FileReader()
+						reader.addEventListener('load', () => {
+							fileEl.files[i].src = reader.result
+							this._addFile(fileEl.files[i])
+							this.updateTipFileInfo()
+							if (i === size - 1) {
+								this.$nextTick(() => {
+									if (this.auto) {
+										this.upload(fileEl.files[i])
+									}
+								})
+							}
+						}, false)
+						reader.readAsDataURL(fileEl.files[i])
+					} else {
+						this._addFile(fileEl.files[i])
+						this.updateTipFileInfo()
+						this.$nextTick(() => {
+							if (this.auto || this.mode === 'button') {
+								this.upload(fileEl.files[i])
+							}
+						})
+					}
+				}
+			}
+		},
+		handleUploadStart(iFiles) {
+			if (this.beforeStart) {
+				const fn = this.beforeStart(iFiles)
+				// 异步
+				if (fn && fn.then) {
+					fn.then(flag => {
+						this.uploadAction()
+					})
+				} else {
+					// 是同步方法，则返回为 true 执行
+					if (fn) {
+						this.uploadAction()
+					}
+				}
+			} else {
+				this.uploadAction()
+			}
+		},
+		uploadAction() {
+			// 调用onStart
+			this.$emit('start', this.iFiles)
+
+			if (this.vmDisabled || this.loading || this.queue.length > 0) {
+				return
+			}
+
+			let file, transfer
+			for (let guid in this.iFiles) {
+				file = this.iFiles[guid]
+				if (file.valid && !file.fileId && !file.finished && (transfer = this.transfers[guid])) { // 根据fileId判断是否已经完成上传
+					transfer.send()
+				}
+			}
+		},
+		upload(iFiles) {
+			this.handleUploadStart(iFiles)
+		},
+		clearClick() {
+			if (this.vmDisabled) return
+
+			// 清除已上传文件列表
+			for (var guid in this.iFiles) {
+				this._removeFile(guid)
+			}
+			this.finishedFiles = []
+
+			// 重置form
+			let refs = this.$refs['upForm']
+			refs.reset()
+
+			this.updateTipFileInfo()
+
+			this.$emit('clear', this.iFiles, this.popup)
+		},
+		_transferStart(file) {
+			if (!file.guid) return
+
+			this.queue.push(file.guid)
+
+			this.iFiles[file.guid].status = 1 // 1:start,2:success,3:error
+		},
+		_transferSuccess(data, status, file) {
+			if (!file) return
+			this.queue.splice(this.queue.indexOf(file.guid), 1)
+
+			this.iFiles[file.guid].status = 2 // 1:start,2:success,3:error
+			this.iFiles[file.guid].percent = 100
+
+			// 成功事件
+			file.finished = true
+
+			// 处理 fileId 为 undefined 的情况
+			if (!file.fileId) {
+				if (typeof data === 'string') {
+					file.fileId = data
+				}
+				if (typeof data === 'object') {
+					if (data.data && data.data['id']) {
+						file.fileId = data.data['id']
+					} else {
+						if (data['id']) {
+							file.fileId = data['id']
+						}
+						if (data['fileId']) {
+							file.fileId = data['fileId']
+						}
+					}
+				}
+			}
+			this.$emit('success', data, status, file)
+		},
+		_transferError(data, status, file) {
+			if (!file) return
+			this.queue.splice(this.queue.indexOf(file.guid), 1)
+
+			this.iFiles[file.guid].status = 3 // 1:start,2:success,3:error
+
+			this.iFiles[file.guid].tipText = data.message
+
+			// 错误事件
+			this.$emit('error', data, status, file)
+		},
+		_transferProgress(loaded, total, file) {
+			if (!file.guid) return
+			let percent
+
+			percent = loaded > 0 && total > 0 ? Math.round(loaded / total * 100) : 0
+			if (percent >= 100) percent = 99 // 由 success 事件处理进度条最终完成
+			this.iFiles[file.guid].percent = percent
+			// 	el .style.width = percent + '%';
+			// }
+
+			// 调用 progress
+			this.$emit('progress', loaded, total, file)
+		},
+		setDisabled(f) {
+			this.vmDisabled = f
+		},
+		getColor(icon) {
+			let color = ''
+			switch (icon) {
+				case 'word':
+					color = 'primary'
+					break
+				case 'excel':
+					color = 'success'
+					break
+				case 'ppt':
+					color = 'warning'
+					break
+				default:
+					break
+			}
+			return color
+		}
+	}
+}
+</script>