Upload 上传

    文件选择上传和拖拽上传控件。

    暂不支持 IE9 浏览器。

    点击上传

    最基本用法，点击上传，一次选择一个文件。

    Upload 上传 - 图2

    设置属性 ，可以选择多个文件。

    1. <template>
    2.     <Upload
    3.         multiple
    4.         action="//jsonplaceholder.typicode.com/posts/">
    5.         <Button icon="ios-cloud-upload-outline">Upload files</Button>
    6.     </Upload>
    7. </template>
    8.     export default {
    10.     }
    11. </script>

    手动上传

    绑定 ，并返回false，可以阻止默认上传流程，手动控制文件上传。

    Upload 上传 - 图4

    拖拽上传

    设置属性 type 为 drag，可以拖拽上传。

    1. <template>
    2.     <Upload
    3.         multiple
    4.         type="drag"
    5.         action="//jsonplaceholder.typicode.com/posts/">
    6.         <div style="padding: 20px 0">
    7.             <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
    8.             <p>Click or drag files here to upload</p>
    9.         </div>
    10. </template>
    11. <script>
    12.     export default {
    14.     }
    15. </script>

    自定义上传列表

    可以自由控制上传列表，完成各种业务逻辑，示例是一个照片墙，可以查看大图和删除。

    • 设置属性 show-upload-list 为 false，可以不显示默认的上传列表。
    • 设置属性 default-file-list 设置默认已上传的列表。

    • 通过 on-success 等属性来控制完整的上传过程，详见API。另外，可以通过丰富的配置，来定制上传需求，本例中包含了：

    • 文件必须是 jpg 或 png 格式的图片。

    • 最多上传5张图片。
    • 每个文件大小不超过 2M。