large-model-component 1.0.0 → 1.0.2

package/packages/upload/index.js

@@ -0,0 +1,2 @@
+import iipUpload from './src';
+export default iipUpload;

package/packages/upload/src/ajax.js

@@ -0,0 +1,156 @@
+function getError(action, option, xhr) {
+  let msg;
+  if (xhr.response) {
+    msg = `${xhr.response.error || xhr.response}`;
+  } else if (xhr.responseText) {
+    msg = `${xhr.responseText}`;
+  } else {
+    msg = `fail to post ${action} ${xhr.status}`;
+  }
+
+  const err = new Error(msg);
+  err.status = xhr.status;
+  err.method = 'post';
+  err.url = action;
+  return err;
+}
+
+function getBody(xhr) {
+  const text = xhr.responseText || xhr.response;
+  if (!text) {
+    return text;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return text;
+  }
+}
+
+export default function upload(option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return;
+  }
+  const action = option.action; // 文件上传上传路径
+  const percentage = []; // 文件上传进度的数组，单项就是一个分片的进度
+  //将Blob转为上传时需要的FormData格式
+  const formDataList = option.chunkList.map((item, index) => {
+    const formData = new FormData();
+    // 额外加入组件外外面传入的data数据
+    const md5 = option.chunkHashList[index];
+    const chunkOption = {
+      // chunkSize: item.size, //当前分片大小
+      // chunkTotal: Math.ceil(option.file.size / option.chunkSize), // 所有切片数量
+      // chunkIndex: index, // 当前切片下标
+      // chunkHash: md5, // 当前切片hash
+      // fileName: option.file.name, // 文件名
+      // fileHash: option.fileHash, // 整个文件hash
+      // fileSize: option.file.size, // 总文件大小
+      partName: index, // 当前切片下标
+      fileName: option.file.name, //文件名
+      totalParts: Math.ceil(option.file.size / option.chunkSize), //分片总数
+      fileMd5: option.fileHash, //整个文件的hash
+      fileSize: option.file.size, //总文件大小
+    };
+    Object.keys(chunkOption).forEach((key) => {
+      formData.append(key, chunkOption[key]);
+    });
+    if (option.data) {
+      Object.keys(option.data).forEach((key) => {
+        formData.append(key, option.data[key]);
+      });
+    }
+    formData.append(option.filename, item); // 文件的Blob
+    return formData;
+  });
+
+  // 更新上传进度条的方法
+  const updataPercentage = (e) => {
+    let loaded = 0; // 当前已经上传文件的总大小
+    percentage.forEach((item) => {
+      loaded += item;
+    });
+    e.percent = (loaded / option.file.size) * 100;
+    option.onProgress(e);
+  };
+  const xhrList = []; // 所有的xhr请求
+  function sendRequest(formDataList, limit) {
+    let counter = 0; //上传成功的数量
+    let index = 0; //当前上传文件的下标
+    let isStop = false;
+    const len = formDataList.length;
+    const start = async () => {
+      if (isStop) {
+        return;
+      }
+      const item = formDataList.shift();
+      if (item) {
+        const chunkIndex = index++;
+        const xhr = new XMLHttpRequest();
+        // 分片上传失败回调
+        xhr.onerror = function error() {
+          isStop = true;
+          option.onerror(getError(action, option, xhr));
+        };
+        // 分片上传成功回调
+        xhr.onload = function onload() {
+          if (xhr.status < 200 || xhr.status >= 300) {
+            isStop = true;
+            option.onerror(getError(action, option, xhr));
+          }
+          // 最后一个上传完成
+          if (counter === len - 1) {
+            const result = xhrList.map((item) => getBody(item));
+            option.onSuccess(result);
+          } else {
+            counter++;
+            start();
+          }
+        };
+        // 上传中的时候更新进度条
+        if (xhr.upload) {
+          xhr.upload.onprogress = function progress(e) {
+            if (e.total > 0) {
+              e.percent = (e.loaded / e.total) * 100;
+            }
+            percentage[chunkIndex] = e.loaded;
+            updataPercentage(e);
+          };
+        }
+        if (action.slice(-1) == '/') {
+          xhr.open('post', action + chunkIndex, true);
+        } else {
+          xhr.open('post', action + '/' + chunkIndex, true);
+        }
+
+        if (option.withCredentials && 'withCredentials' in xhr) {
+          xhr.withCredentials = true;
+        }
+        const headers = option.headers || {};
+        // 添加请求头
+        for (const item in headers) {
+          if (Object.prototype.hasOwnProperty.call(headers, item) && headers[item] !== null) {
+            xhr.setRequestHeader(item, headers[item]);
+          }
+        }
+        // 文件开始上传，并把xhr对象存入xhrList中
+        xhr.send(item);
+        xhrList.push(xhr);
+      }
+    };
+    while (limit > 0) {
+      setTimeout(() => {
+        start();
+      }, Math.random() * 1000);
+      limit -= 1;
+    }
+  }
+
+  try {
+    sendRequest(formDataList, option.thread);
+    return xhrList;
+  } catch (error) {
+    option.onError(error);
+  }
+}

package/packages/upload/src/index.vue

@@ -0,0 +1,329 @@
+<script>
+import UploadList from './upload-list';
+import Upload from './upload';
+
+function noop() {}
+
+export default {
+  name: 'iipUpload',
+
+  components: {
+    UploadList,
+    Upload,
+  },
+
+  provide() {
+    return {
+      uploader: this,
+    };
+  },
+
+  inject: {
+    elForm: {
+      default: '',
+    },
+  },
+
+  props: {
+    chunkSize: {
+      type: Number,
+      default: 10 * 1024 * 1024,
+    },
+    thread: {
+      type: Number,
+      default: 3,
+    },
+    action: {
+      type: String,
+      required: true,
+    },
+    headers: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    data: Object,
+    multiple: Boolean,
+    name: {
+      type: String,
+      default: 'file',
+    },
+    drag: 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: {
+    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);
+        });
+    },
+  },
+
+  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,
+        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,
+        chunkSize: this.chunkSize,
+        thread: this.thread,
+        '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,94 @@
+<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">按delete删除</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>
+export default {
+  name: 'ElUploadList',
+  data() {
+    return {
+      focusing: false,
+    };
+  },
+
+  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>