# upload-component

**Repository Path**: wa0329/upload-component

## Basic Information

- **Project Name**: upload-component
- **Description**: 封装的一个文件上传组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-24
- **Last Updated**: 2024-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

封装uoload上传组件
要求
1.实现多图上传、单图上传
2.实现v-model 
外面传入数据里面可以正常显示
里面变化外面可以得到最新的数据



/**
作用:实现图片上传的双向绑定
属性:
limit:数字类型  限制文件的上传个数  默认1
max-size:数字类型 限制文件的大小 单位为兆  默认3
typeArr:数组类型  限制文件类型 默认[
        'image/png',
        'image/jpeg',
        'image/jpg',
        'image/webp',
        'image/gif'
      ]
webUrl: 字符串类型 图片的基准地址 默认为空 如果写了 会对传入的数据地址进行拼接
v-model: 数组类型  绑定的变量是一个图片地址数组  数组里面的元素就是图片路径

**/

实现  控制filelist(核心)
1.设计可以控制上传个数的limit(props)
利用computed计算属性(比较limit与filelist数组的长度,数组长度大于等于limit就返回true),设计class将上传按钮隐藏
2.删除 on-remove 钩子函数
file 移除文件的信息  拿到uid 利用filter过滤筛选filelist
3.预览 on-preview 钩子函数
file 点击预览的文件信息  拿url地址  
设置el-dialog弹框
4.校验
before-upload 上传前的钩子  做图片大小和格式的校验  return false 就不走httpRequest上传
httpRequest覆盖默认上传行为 
调用上传文件api函数(formdata格式)
上传成功 处理fileList    将上传好的图片放到fileList 
url:回显的地址  saveUrl:返回出去提交的     uploaded:判断是否上传成功的
5.设置value 外面传进来的图片数据
watch监听value  将value加到fileList数组中

6.fileList变化告诉通知外面
filter 过滤上传好的图片 uploaded   处理数据 将所有saveUrl 加工为数组 传给外面

7.定义addWebUlr函数
定义props webUlr基准地址  如果传就拼接 不传就没有
传入地址 返回拼接后的地址