[封装自己的ui组件库] upload的实现与难点

效果

1、服务文件(tmp为保存上传文件文件夹)

2、点击上传

3、图片列表

4、拖拽

5、手动上传

5、上传失败

6、服务

问题

1、如何打开文件列表

2、如何取出文件

3、对取出的文件校验？

4、如何发送请求(多文件上传？)

5、如何完成上传列表展示

6、拖拽上传？

7、可扩展？

思路

在实现的过程中大致思考了一下流程

1 点击或取文件(input:file)

2 获取文件进行校验(大小和类型)

3 创建初始化列表(对上传文件进行包装)

4 根据是否自动上传决定是否直接添加上传列表，还是手动上传至上传列表

5 监视初始化列表，取出上传列表数据，使用formdata转换为二进制数据通过ajax发送至后台

6 请求过程中监视请求结果动态展示列表

7 多文件使用原生的multipart可实现

8 拖拽可使用drop，dragover,dragenter,dragleave,dragover的事件

。。。。

实现

1、利用input:file获取文件

<input ref="inputFile" type="file" name="" id="" @change="selectfilesChange" :multiple="multiple">

 // 点击触发弹窗的事件pushUploadFrame() {// 清空inputFilethis.$refs.inputFile.value = nullthis.$refs.inputFile.click();}, 

2、取出文件+文件校验

 // 文件选中变化selectfilesChange(e, files) {if (e) {// 转换为真实数组以便使用数组的方法this.selectFileList = Array.from(e.target.files);} else {this.selectFileList = Array.from(files);console.log(files);}// 判断文件是否已上传// 前去校验let { isResult, content } = this.handlerFileAccept(this.selectFileList);if (isResult) {// 文件校验成功事件this.$emit('acceptAfter', this.selectFileList)// 添加到初始化上传列表this.addUpList(this.selectFileList)} else {// 触发文件上传失败事件this.$emit('uploadError', content)}},// 处理文件校验相关handlerFileAccept(