7moor-element-ui 2.14.63

package/packages/upload/src/index.vue

@@ -0,0 +1,346 @@
+<script>
+	import UploadList from './upload-list';
+	import Upload from './upload';
+	import ElProgress from '7moor-element-ui/packages/progress';
+	import Migrating from '7moor-element-ui/src/mixins/migrating';
+
+	function noop() {}
+
+	export default {
+		name: 'ElUpload',
+
+		mixins: [Migrating],
+
+		components: {
+			ElProgress,
+			UploadList,
+			Upload,
+		},
+
+		provide() {
+			return {
+				uploader: this,
+			};
+		},
+
+		inject: {
+			elForm: {
+				default: '',
+			},
+		},
+
+		props: {
+			action: {
+				type: String,
+				required: true,
+			},
+			headers: {
+				type: Object,
+				default() {
+					return {};
+				},
+			},
+			data: Object,
+			multiple: Boolean,
+			name: {
+				type: String,
+				default: 'file',
+			},
+			drag: Boolean,
+			paste: Boolean,
+			dragger: Boolean,
+			withCredentials: Boolean,
+			showFileList: {
+				type: Boolean,
+				default: true,
+			},
+			accept: String,
+			type: {
+				type: String,
+				default: 'select',
+			},
+			beforeUpload: Function,
+			beforeRemove: Function,
+			onRemove: {
+				type: Function,
+				default: noop,
+			},
+			onChange: {
+				type: Function,
+				default: noop,
+			},
+			onPreview: {
+				type: Function,
+			},
+			onSuccess: {
+				type: Function,
+				default: noop,
+			},
+			onProgress: {
+				type: Function,
+				default: noop,
+			},
+			onError: {
+				type: Function,
+				default: noop,
+			},
+			fileList: {
+				type: Array,
+				default() {
+					return [];
+				},
+			},
+			autoUpload: {
+				type: Boolean,
+				default: true,
+			},
+			listType: {
+				type: String,
+				default: 'text', // text,picture,picture-card
+			},
+			httpRequest: Function,
+			disabled: Boolean,
+			limit: Number,
+			onExceed: {
+				type: Function,
+				default: noop,
+			},
+		},
+
+		data() {
+			return {
+				uploadFiles: [],
+				dragOver: false,
+				draging: false,
+				tempIndex: 1,
+			};
+		},
+
+		computed: {
+			uploadDisabled() {
+				return this.disabled || (this.elForm || {}).disabled;
+			},
+		},
+
+		watch: {
+			listType(type) {
+				if (type === 'picture-card' || type === 'picture') {
+					this.uploadFiles = this.uploadFiles.map((file) => {
+						if (!file.url && file.raw) {
+							try {
+								file.url = URL.createObjectURL(file.raw);
+							} catch (err) {
+								console.error('[Element Error][Upload]', err);
+							}
+						}
+						return file;
+					});
+				}
+			},
+			fileList: {
+				immediate: true,
+				handler(fileList) {
+					this.uploadFiles = fileList.map((item) => {
+						item.uid = item.uid || Date.now() + this.tempIndex++;
+						item.status = item.status || 'success';
+						return item;
+					});
+				},
+			},
+		},
+
+		methods: {
+			handlePaste(event) {
+				let items = event.clipboardData && event.clipboardData.items;
+				let file = null;
+				if (items && items.length) {
+					for (var i = 0; i < items.length; i++) {
+						if (items[i].type.indexOf('image') !== -1) {
+							file = items[i].getAsFile();
+						}
+					}
+				}
+				console.log(file);
+			},
+			handleStart(rawFile) {
+				rawFile.uid = Date.now() + this.tempIndex++;
+				let file = {
+					status: 'ready',
+					name: rawFile.name,
+					size: rawFile.size,
+					percentage: 0,
+					uid: rawFile.uid,
+					raw: rawFile,
+				};
+
+				if (this.listType === 'picture-card' || this.listType === 'picture') {
+					try {
+						file.url = URL.createObjectURL(rawFile);
+					} catch (err) {
+						console.error('[Element Error][Upload]', err);
+						return;
+					}
+				}
+
+				this.uploadFiles.push(file);
+				this.onChange(file, this.uploadFiles);
+			},
+			handleProgress(ev, rawFile) {
+				const file = this.getFile(rawFile);
+				this.onProgress(ev, file, this.uploadFiles);
+				file.status = 'uploading';
+				file.percentage = ev.percent || 0;
+			},
+			handleSuccess(res, rawFile) {
+				const file = this.getFile(rawFile);
+
+				if (file) {
+					file.status = 'success';
+					file.response = res;
+
+					this.onSuccess(res, file, this.uploadFiles);
+					this.onChange(file, this.uploadFiles);
+				}
+			},
+			handleError(err, rawFile) {
+				const file = this.getFile(rawFile);
+				const fileList = this.uploadFiles;
+
+				file.status = 'fail';
+
+				fileList.splice(fileList.indexOf(file), 1);
+
+				this.onError(err, file, this.uploadFiles);
+				this.onChange(file, this.uploadFiles);
+			},
+			handleRemove(file, raw) {
+				if (raw) {
+					file = this.getFile(raw);
+				}
+				let doRemove = () => {
+					this.abort(file);
+					let fileList = this.uploadFiles;
+					fileList.splice(fileList.indexOf(file), 1);
+					this.onRemove(file, fileList);
+				};
+
+				if (!this.beforeRemove) {
+					doRemove();
+				} else if (typeof this.beforeRemove === 'function') {
+					const before = this.beforeRemove(file, this.uploadFiles);
+					if (before && before.then) {
+						before.then(() => {
+							doRemove();
+						}, noop);
+					} else if (before !== false) {
+						doRemove();
+					}
+				}
+			},
+			getFile(rawFile) {
+				let fileList = this.uploadFiles;
+				let target;
+				fileList.every((item) => {
+					target = rawFile.uid === item.uid ? item : null;
+					return !target;
+				});
+				return target;
+			},
+			abort(file) {
+				this.$refs['upload-inner'].abort(file);
+			},
+			clearFiles() {
+				this.uploadFiles = [];
+			},
+			submit() {
+				this.uploadFiles
+					.filter((file) => file.status === 'ready')
+					.forEach((file) => {
+						this.$refs['upload-inner'].upload(file.raw);
+					});
+			},
+			getMigratingConfig() {
+				return {
+					props: {
+						'default-file-list': 'default-file-list is renamed to file-list.',
+						'show-upload-list': 'show-upload-list is renamed to show-file-list.',
+						'thumbnail-mode':
+							'thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan',
+					},
+				};
+			},
+		},
+
+		beforeDestroy() {
+			this.uploadFiles.forEach((file) => {
+				if (file.url && file.url.indexOf('blob:') === 0) {
+					URL.revokeObjectURL(file.url);
+				}
+			});
+		},
+		render(h) {
+			let uploadList;
+
+			if (this.showFileList) {
+				uploadList = (
+					<UploadList
+						disabled={this.uploadDisabled}
+						listType={this.listType}
+						files={this.uploadFiles}
+						on-remove={this.handleRemove}
+						handlePreview={this.onPreview}
+					>
+						{(props) => {
+							if (this.$scopedSlots.file) {
+								return this.$scopedSlots.file({
+									file: props.file,
+								});
+							}
+						}}
+					</UploadList>
+				);
+			}
+
+			const uploadData = {
+				props: {
+					type: this.type,
+					drag: this.drag,
+					paste: this.paste,
+					action: this.action,
+					multiple: this.multiple,
+					'before-upload': this.beforeUpload,
+					'with-credentials': this.withCredentials,
+					headers: this.headers,
+					name: this.name,
+					data: this.data,
+					accept: this.accept,
+					fileList: this.uploadFiles,
+					autoUpload: this.autoUpload,
+					listType: this.listType,
+					disabled: this.uploadDisabled,
+					limit: this.limit,
+					'on-exceed': this.onExceed,
+					'on-start': this.handleStart,
+					'on-progress': this.handleProgress,
+					'on-success': this.handleSuccess,
+					'on-error': this.handleError,
+					'on-preview': this.onPreview,
+					'on-remove': this.handleRemove,
+					'http-request': this.httpRequest,
+				},
+				ref: 'upload-inner',
+			};
+
+			const trigger = this.$slots.trigger || this.$slots.default;
+			const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
+			return (
+				<div>
+					{this.listType === 'picture-card' ? uploadList : ''}
+					{this.$slots.trigger ? [uploadComponent, this.$slots.default] : uploadComponent}
+					{this.$slots.tip}
+					{this.listType !== 'picture-card' ? uploadList : ''}
+				</div>
+			);
+		},
+	};
+</script>

package/packages/upload/src/upload-dragger.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="el-upload-dragger"
+    :class="{
+      'is-dragover': dragover
+    }"
+    @drop.prevent="onDrop"
+    @dragover.prevent="onDragover"
+    @dragleave.prevent="dragover = false"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElUploadDrag',
+    props: {
+      disabled: Boolean
+    },
+    inject: {
+      uploader: {
+        default: ''
+      }
+    },
+    data() {
+      return {
+        dragover: false
+      };
+    },
+    methods: {
+      onDragover() {
+        if (!this.disabled) {
+          this.dragover = true;
+        }
+      },
+      onDrop(e) {
+        if (this.disabled || !this.uploader) return;
+        const accept = this.uploader.accept;
+        this.dragover = false;
+        if (!accept) {
+          this.$emit('file', e.dataTransfer.files);
+          return;
+        }
+        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
+          const { type, name } = file;
+          const extension = name.indexOf('.') > -1
+            ? `.${ name.split('.').pop() }`
+            : '';
+          const baseType = type.replace(/\/.*$/, '');
+          return accept.split(',')
+            .map(type => type.trim())
+            .filter(type => type)
+            .some(acceptedType => {
+              if (/\..+$/.test(acceptedType)) {
+                return extension === acceptedType;
+              }
+              if (/\/\*$/.test(acceptedType)) {
+                return baseType === acceptedType.replace(/\/\*$/, '');
+              }
+              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
+                return type === acceptedType;
+              }
+              return false;
+            });
+        }));
+      }
+    }
+  };
+</script>
+

package/packages/upload/src/upload-list.vue

@@ -0,0 +1,105 @@
+<template>
+  <transition-group
+    tag="ul"
+    :class="[
+      'el-upload-list',
+      'el-upload-list--' + listType,
+      { 'is-disabled': disabled }
+    ]"
+    name="el-list"
+  >
+    <li
+      v-for="file in files"
+      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
+      :key="file.uid"
+      tabindex="0"
+      @keydown.delete="!disabled && $emit('remove', file)"
+      @focus="focusing = true"
+      @blur="focusing = false"
+      @click="focusing = false"
+    >
+      <slot :file="file">
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
+          :src="file.url" alt=""
+        >
+        <a class="el-upload-list__item-name" @click="handleClick(file)">
+          <i class="el-icon-document"></i>{{file.name}}
+        </a>
+        <label class="el-upload-list__item-status-label">
+          <i :class="{
+            'el-icon-upload-success': true,
+            'el-icon-circle-check': listType === 'text',
+            'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
+          }"></i>
+        </label>
+        <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
+        <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
+        <el-progress
+          v-if="file.status === 'uploading'"
+          :type="listType === 'picture-card' ? 'circle' : 'line'"
+          :stroke-width="listType === 'picture-card' ? 6 : 2"
+          :percentage="parsePercentage(file.percentage)">
+        </el-progress>
+        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
+          <span
+            class="el-upload-list__item-preview"
+            v-if="handlePreview && listType === 'picture-card'"
+            @click="handlePreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="$emit('remove', file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </slot>
+    </li>
+  </transition-group>
+</template>
+<script>
+  import Locale from '7moor-element-ui/src/mixins/locale';
+  import ElProgress from '7moor-element-ui/packages/progress';
+
+  export default {
+
+    name: 'ElUploadList',
+
+    mixins: [Locale],
+
+    data() {
+      return {
+        focusing: false
+      };
+    },
+    components: { ElProgress },
+
+    props: {
+      files: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      handlePreview: Function,
+      listType: String
+    },
+    methods: {
+      parsePercentage(val) {
+        return parseInt(val, 10);
+      },
+      handleClick(file) {
+        this.handlePreview && this.handlePreview(file);
+      }
+    }
+  };
+</script>