vue2组件库-上传组件

vue2组件库

上传组件

核心思路：监控整个上传的流程

上传成功 上传失败

类型：拖拽 多个文件上传

上传必备属性 & 钩子属性

跟上传强关联的属性，上传必备的字段

name: 提交的那个formData字段名

action：ajax接口路径

limit：限制提交个数

钩子函数

上传fileList数据构造

dom: this.$refs

选中文件 上传

按照整个上传的流程

fileList中每个对象的状态

1. 刚放进去，准备好了待上传
2. 上传中
3. 上传完成

自己创建的一个文件对象

数据层fileList

弄一个数据同步v-model或.async，我就给你一个数据不希望它有什么同步的功能，我自己身上有一份数据，用户的数据也格式化放到这个数组里不涉及什么子改父父改子，自己处理自己的数据。

文件变化了，触发文件变化的钩子。

发起ajax上传请求

httpPost的处理

处理上传前+上传中+上传成功的各状态展示

file.status percent 

onProgress onSuccess onError

upload.vue

.zh-upload{
  &-button{
    display: inline-block;
  }
  input[type=file]{
    display: none;
  }
}

upload.js

export function ajax(options){
    let xhr=new XMLHttpRequest()
    const {filename,file,action,onSuccess,onError,onProgress}=options;
    const fd=new FormData
    fd.append(filename,file)
    xhr.open('post',action)
    xhr.onload=()=>{
        onSuccess(JSON.parse(xhr.responseText))
    }
    xhr.onerror=()=>{
        onError(JSON.parse(xhr.errorText))
    }
    xhr.upload.onprogress=(ev)=>{
        onProgress(ev)
    }
    xhr.send(fd)
    return xhr;
}

progress.vue

.progress-outer{
  width: 100%;
  background: grey;
  position: relative;
  .progress-inner{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    transition:width .3s ease;
  }
}
.progress-outer,.progress-inner{
  border-radius: 5px;
}

设计组件思想：

用户要有那些功能

暴露用户那些功能

用户有哪些行为

拖拽上传

主要就是onDrop事件

ondragover.prevent ondragleave.prevent

Popover组件

appendChild insertBefore都会对dom有移动性

事件：事件机制，谁在谁里面，怎么触发这个事件，事件都有哪些问题。

具体位置：用js算left top的值