element/packages/upload/src/upload.vue

<script>
import merge from 'element-ui/src/utils/merge';
import ajax from './ajax';
import dragger from './dragger';

export default {
  mixins: [dragger],

  props: {
    type: String,
    action: {
      type: String,
      required: true
    },
    name: {
      type: String,
      default: 'file'
    },
    data: Object,
    headers: Object,
    withCredentials: Boolean,
    multiple: Boolean,
    accept: String,
    onStart: Function,
    onProgress: Function,
    onSuccess: Function,
    onError: Function,
    beforeUpload: Function,
    draggable: Boolean,
    onPreview: {
      type: Function,
      default: function() {}
    },
    onRemove: {
      type: Function,
      default: function() {}
    },
    fileList: Array,
    autoUpload: Boolean
  },

  data() {
    return {
      mouseover: false
    };
  },

  methods: {
    isImage(str) {
      return str.indexOf('image') !== -1;
    },
    handleChange(ev) {
      const files = ev.target.files;

      if (!files) return;
      this.uploadFiles(files);
      this.$refs.input.value = null;
    },
    uploadFiles(files) {
      let postFiles = Array.prototype.slice.call(files);
      if (!this.multiple) { postFiles = postFiles.slice(0, 1); }

      if (postFiles.length === 0) { return; }

      postFiles.forEach(rawFile => {
        if (!this.thumbnailMode || this.isImage(rawFile.type)) {
          this.onStart(rawFile);
          if (this.autoUpload) this.upload(rawFile);
        }
      });
    },
    upload(rawFile, file) {
      if (!this.beforeUpload) {
        return this.post(rawFile);
      }

      const before = this.beforeUpload(rawFile);
      if (before && before.then) {
        before.then(processedFile => {
          if (Object.prototype.toString.call(processedFile) === '[object File]') {
            this.post(processedFile);
          } else {
            this.post(rawFile);
          }
        }, () => {
          if (file) this.onRemove(file);
        });
      } else if (before !== false) {
        this.post(rawFile);
      } else {
        if (file) this.onRemove(file);
      }
    },
    post(rawFile) {
      ajax({
        headers: this.headers,
        withCredentials: this.withCredentials,
        file: rawFile,
        data: this.data,
        filename: this.name,
        action: this.action,
        onProgress: e => {
          this.onProgress(e, rawFile);
        },
        onSuccess: res => {
          this.onSuccess(res, rawFile);
        },
        onError: (err, response) => {
          this.onError(err, response, rawFile);
        }
      });
    },
    handleClick() {
      this.$refs.input.click();
    }
  },

  render(h) {
    let {
      handleClick,
      draggable,
      onDrop,
      showCover,
      onPreview,
      onRemove,
      handleChange,
      multiple,
      accept,
      lastestFile
    } = this;
    const data = {
      class: {
        'el-upload': true
      },
      on: {
        click: handleClick
      }
    };
    if (draggable) {
      merge(data.on, {
        dragover: (ev) => {
          ev.preventDefault();
          this.dragOver = true;
        },
        dragleave: (ev) => {
          ev.preventDefault();
          this.dragOver = false;
        },
        drop: (ev) => {
          ev.preventDefault();
          onDrop(ev);
        }
      });
      merge(data.class, {
        'el-upload--draggable': true,
        'is-dragOver': this.dragOver,
        'is-showCover': this.showCover
      });
    }
    return (
      <div {...data}>
        {
          showCover
          ? <cover image={lastestFile} on-preview={onPreview} on-remove={onRemove}></cover>
          : this.$slots.default
        }
        <input class="el-upload__input" type="file" ref="input" on-change={handleChange} multiple={multiple} accept={accept}></input>
      </div>
    );
  }
};
</script>