vue2组件库
上传组件
核心思路：监控整个上传的流程
上传成功 上传失败
类型：拖拽 多个文件上传
上传必备属性 & 钩子属性
跟上传强关联的属性，上传必备的字段
name: 提交的那个formData字段名
action：ajax接口路径
limit：限制提交个数
钩子函数
上传fileList数据构造
dom: this.$refs
选中文件 上传
按照整个上传的流程
fileList中每个对象的状态
- 刚放进去，准备好了待上传
- 上传中
- 上传完成
自己创建的一个文件对象
数据层fileList
弄一个数据同步v-model或.async，我就给你一个数据不希望它有什么同步的功能，我自己身上有一份数据，用户的数据也格式化放到这个数组里不涉及什么子改父父改子，自己处理自己的数据。
文件变化了，触发文件变化的钩子。
发起ajax上传请求
httpPost的处理
处理上传前+上传中+上传成功的各状态展示
file.status percent
onProgress onSuccess onError
upload.vue
<template>
<div class="zh-upload">
<div class="zh-upload-button" @click="upload">
<slot></slot>
</div>
<div><slot name="tip"></slot></div>
<input ref="file" type="file" :accept="accept" :multiple="multiple" @change="changeFile">
<ul>
<li v-for="file in files">
{{file.name}}
<zh-progress v-if="file.status==='uploading'" :percent="file.percent"></zh-progress>
</li>
</ul>
</div>
</template>
<script>
import _ from 'lodash'
import {ajax} from './upload'
export default {
name:'zh-upload',
props:{
name:{
type:String,
default:'file'
},
action:{
type:String,
default:''
},
accept:{
type:String,
default:''
},
multiple:{
type:Boolean,
default:false
},
limit:{
type:Number,
default:0
},
onExceed:{
type:Function,
},
beforeUpload:{
type:Function,
},
httpRequest:{
type:Function,
default:ajax,
},
fileList:{
type:Array,
default:[]
}
},
data(){
return {
files:[],
uniqueId:1,
}
},
watch:{
fileList:{
deep:true,
immediate:true,
handler(val){
this.files=val.map(item=>{
item.uid=`${+new Date}${this.uniqueId++}`
item.status='success'
return item;
// const file={
// uid:item.uid,
// name:item.name,
// url:item.url,
// status:'success', // 完成成功态时只关心 name & url
// percent:0,
// }
// return file;
})
}
}
},
methods:{
upload(){
this.$refs.file.value=''
this.$refs.file.click()
},
changeFile(ev){
let files=ev.target.files;
// 限制最多上传的文件数
if(this.limit && this.files.length+files.length>this.limit){
return this.onExceed();
}
// [...files].forEach
_.forEach(files,rawFile=>{
this.uploadStart(rawFile)
this.uploadFile(rawFile)
})
},
uploadStart(rawFile){
rawFile.uid=`${+new Date}${this.uniqueId++}`
// 构造新的文件对象
const fileNew={
uid:rawFile.uid,
name:rawFile.name,
size:rawFile.size,
type:rawFile.type,
status:'uploadstart',
percent:0,
rawFile,
}
this.files.push(fileNew)
},
uploadFile(rawFile){
// @todo beforeUpload
if(typeof this.beforeUpload === 'function'){
let flag=this.beforeUpload(rawFile) // 目前没考虑promise的情况
if(!flag) return
}
this.post(rawFile)
},
post(rawFile){
const options={
filename:this.name,
file:rawFile,
action:this.action,
onSuccess:(res)=>{
this.handleSuccess(res,rawFile)
},
onError:(res)=>{
},
onProgress:(ev)=>{
this.handleProgress(ev,rawFile)
},
}
this.httpRequest(options)
},
handleSuccess(res,rawFile){
const file=this.files.find(f=>f.uid===rawFile.uid)
file.status='success'
},
handleProgress(ev,rawFile){
// file是原生file文件，找到files中对应的file对象
const file=this.files.find(f=>f.uid===rawFile.uid)
file.status='uploading'
file.percent=Math.round(ev.loaded/ev.total*100)
}
}
}
</script>
<style scoped lang="scss">
.zh-upload{
&-button{
display: inline-block;
}
input[type=file]{
display: none;
}
}
</style>
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
<template>
<div class="progress-outer" :style="outerStyle">
<div class="progress-inner" :style="innerStyle"></div>
</div>
</template>
<script>
export default {
name:'zh-progress',
props:{
strokeWidth:{
type:Number,
default:10
},
strokeColor:{
type:String,
default:'blue'
},
percent:{
type:Number,
default:0
}
},
computed:{
outerStyle(){
return {
height:`${this.strokeWidth}px`,
}
},
innerStyle(){
return {
width:`${this.percent}%`,
background:this.strokeColor
}
}
},
watch:{
percent(val){
console.log(val,'percent');
}
}
}
</script>
<style scoped lang="scss">
.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;
}
</style>
设计组件思想：
用户要有那些功能
暴露用户那些功能
用户有哪些行为
拖拽上传
主要就是onDrop事件
ondragover.prevent ondragleave.prevent
Popover组件
appendChild insertBefore都会对dom有移动性
事件：事件机制，谁在谁里面，怎么触发这个事件，事件都有哪些问题。文章来源：https://www.toymoban.com/news/detail-721220.html
具体位置：用js算left top的值文章来源地址https://www.toymoban.com/news/detail-721220.html
到了这里，关于vue2组件库-上传组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
