设为首页 加入收藏

TOP

element-ui Upload 上传组件源码分析整理笔记(十四)(一)
2019-09-17 15:21:23 】 浏览:68
Tags:element-ui Upload 上传 组件 源码 分析 整理 笔记 十四

简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件)、upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来...

index.vue

<script>
import UploadList from './upload-list';
import Upload from './upload';
import ElProgress from 'element-ui/packages/progress';
import Migrating from '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, //是否启用拖拽上传
    dragger: Boolean,
    withCredentials: Boolean, //支持发送 cookie 凭证信息
    showFileList: { //是否显示已上传文件列表
      type: Boolean,
      default: true
    },
    accept: String, //接受上传的文件类型(thumbnail-mode 模式下此参数无效)
    type: {
      type: String,
      default: 'select'
    },
    beforeUpload: Function, //上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
    beforeRemove: Function, //删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止上传。
    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: { //上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
      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: {
    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;
    },
    //文件上传成功后改用该方法,在该方法中调用用户设置的on-success和on-change方法,并将对应的参数传递出去
    handleSuccess(res, rawFile) {
      const file = this.getFile(rawFile);

      if (file) {
        file.status = 'success';
        file.response = re
首页 上一页 1 2 3 4 5 6 下一页 尾页 1/6/6
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇vue日历/日程提醒/html5本地缓存 下一篇css元素水平垂直居中

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目