# MyFileUpload

上传图片组件，支持OSS上传

引入

  import MyFileUpload from '@/components/MyFileUpload';

注册组件

    export default {
        data()=>{
            return {
                fileList: []
            }
        },
        components: {
            MyFileUpload
        }
    }

在template里面使用

     <my-file-upload :file-list.sync="fileList"
          accept="application/pdf"
          max-size="50"
          tips="只能上传一个pdf文件, 文件大小<50M">
     </my-file-upload>

就可以看到下图的效果了：

# API

• accept

字段含义： 文件过滤类型
类型： String
默认： ''
常用： 'application/pdf', 'image/png'

• max-file-number

字段含义： 文件最多选择个数
类型： Number
默认： 1

• max-size

字段含义：文件最大尺寸（MB）
类型： Number
默认： 50

• tips

字段含义：文字提示
类型： String
默认： ''

• disabled

字段含义：是否禁用
类型： Boolean
默认： false
说明： =true时组件点击事件无效，无法选择图片。

• fileList

字段含义：上传列表数组
类型： Array
默认： []
说明： 图片上传成功后的信息会放到这个数组，数组元素格式如下：

{
    name: '1.jpg',
    uid: '873726546662',
    url: 'http://rs.jinxianghuangjin.com/pic/dd.png'
}

• serverDir

字段含义：置顶上传到OSS的文件夹
类型： String
默认： ''
说明： 如果指定文件夹目录，文件会被放到指定目录，不指定文件夹的情况下,除pdf之外的文件都会被放到file文件夹，pdf文件会被放置到filePdf文件夹

# 原理

本组件直接上传文件到小乌龟后台的OSS存储服务器,将返回的地址数据存放在fileList里面,然后再自行上传到服务器。