# MyImageUpload

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

引入

  import MyImageUpload from '@/components/MyImageUpload';

注册组件

    export default {
        data()=>{
            return {
                url: ''
            }
        },
        components: {
            MyImageUpload
        }
    }

在template里面使用

     <my-image-upload :url.sync="fileList"
          accept="image/png">
     </my-image-upload>

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

# API

• accept

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

• url

字段含义： 文件地址
类型： String
默认： ''

• max-size

字段含义： 文件限制大小
类型： Number
默认： 20MB

• limitWH

字段含义： 限制宽高
类型： String
默认： 无
可用： ‘>100,100’, ‘<100,100’,‘=200,200’

• showPicPreview

字段含义： 是否显示预览，为true时点击上传后的图片会弹出展示框
类型： Boolean
默认： true

• disabled

字段含义： 是否禁用, 禁用后不可以上传
类型： Boolean
默认： true

• serverDir

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

# 说明

本组件每次只能上传一个文件，只能上传图片文件, 并带有图片预览功能，如果需要上传其他文件，请使用MyFileUoload组件。

# 原理

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