• Upload 上传
    • 概述
    • 代码示例
    • API
      • Upload props
      • Upload methods
      • Upload slot

    Upload 上传

    概述

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

    暂不支持 IE9 浏览器。

    代码示例

    Upload 上传 - 图1

    点击上传

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

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

    Upload 上传 - 图2

    多选

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

    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. <script>
    9.     export default {
    11.     }
    12. </script>

    Upload 上传 - 图3

    手动上传

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

    1. <template>
    2.     <div>
    3.         <Upload
    4.             :before-upload="handleUpload"
    5.             action="//jsonplaceholder.typicode.com/posts/">
    6.             <Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
    7.         </Upload>
    8.         <div v-if="file !== null">Upload file: {{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div>
    9.     </div>
    10. </template>
    11. <script>
    12.     export default {
    13.         data () {
    14.             return {
    15.                 file: null,
    16.                 loadingStatus: false
    17.             }
    18.         },
    19.         methods: {
    20.             handleUpload (file) {
    21.                 this.file = file;
    22.                 return false;
    23.             },
    24.             upload () {
    25.                 this.loadingStatus = true;
    26.                 setTimeout(() => {
    27.                     this.file = null;
    28.                     this.loadingStatus = false;
    29.                     this.$Message.success('Success')
    30.                 }, 1500);
    31.             }
    32.         }
    33.     }
    34. </script>

    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.     </Upload>
    11. </template>
    12. <script>
    13.     export default {
    15.     }
    16. </script>

    Upload 上传 - 图5

    自定义上传列表

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

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

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

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

    • 最多上传5张图片。
    • 每个文件大小不超过 2M。
    1. <template>
    2.     <div class="demo-upload-list" v-for="item in uploadList">
    3.         <template v-if="item.status === 'finished'">
    4.             <img :src="item.url">
    5.             <div class="demo-upload-list-cover">
    6.                 <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
    7.                 <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
    8.             </div>
    9.         </template>
    10.         <template v-else>
    11.             <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
    12.         </template>
    13.     </div>
    14.     <Upload
    15.         ref="upload"
    16.         :show-upload-list="false"
    17.         :default-file-list="defaultList"
    18.         :on-success="handleSuccess"
    19.         :format="['jpg','jpeg','png']"
    20.         :max-size="2048"
    21.         :on-format-error="handleFormatError"
    22.         :on-exceeded-size="handleMaxSize"
    23.         :before-upload="handleBeforeUpload"
    24.         multiple
    25.         type="drag"
    26.         action="//jsonplaceholder.typicode.com/posts/"
    27.         style="display: inline-block;width:58px;">
    28.         <div style="width: 58px;height:58px;line-height: 58px;">
    29.             <Icon type="ios-camera" size="20"></Icon>
    30.         </div>
    31.     </Upload>
    32.     <Modal title="View Image" v-model="visible">
    33.         <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
    34.     </Modal>
    35. </template>
    36. <script>
    37.     export default {
    38.         data () {
    39.             return {
    40.                 defaultList: [
    41.                     {
    42.                         'name': 'a42bdcc1178e62b4694c830f028db5c0',
    43.                         'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
    44.                     },
    45.                     {
    46.                         'name': 'bc7521e033abdd1e92222d733590f104',
    47.                         'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
    48.                     }
    49.                 ],
    50.                 imgName: '',
    51.                 visible: false,
    52.                 uploadList: []
    53.             }
    54.         },
    55.         methods: {
    56.             handleView (name) {
    57.                 this.imgName = name;
    58.                 this.visible = true;
    59.             },
    60.             handleRemove (file) {
    61.                 const fileList = this.$refs.upload.fileList;
    62.                 this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    63.             },
    64.             handleSuccess (res, file) {
    65.                 file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
    66.                 file.name = '7eb99afb9d5f317c912f08b5212fd69a';
    67.             },
    68.             handleFormatError (file) {
    69.                 this.$Notice.warning({
    70.                     title: 'The file format is incorrect',
    71.                     desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
    72.                 });
    73.             },
    74.             handleMaxSize (file) {
    75.                 this.$Notice.warning({
    76.                     title: 'Exceeding file size limit',
    77.                     desc: 'File  ' + file.name + ' is too large, no more than 2M.'
    78.                 });
    79.             },
    80.             handleBeforeUpload () {
    81.                 const check = this.uploadList.length < 5;
    82.                 if (!check) {
    83.                     this.$Notice.warning({
    84.                         title: 'Up to five pictures can be uploaded.'
    85.                     });
    86.                 }
    87.                 return check;
    88.             }
    89.         },
    90.         mounted () {
    91.             this.uploadList = this.$refs.upload.fileList;
    92.         }
    93.     }
    94. </script>
    95. <style>
    96.     .demo-upload-list{
    97.         display: inline-block;
    98.         width: 60px;
    99.         height: 60px;
    100.         text-align: center;
    101.         line-height: 60px;
    102.         border: 1px solid transparent;
    103.         border-radius: 4px;
    104.         overflow: hidden;
    105.         background: #fff;
    106.         position: relative;
    107.         box-shadow: 0 1px 1px rgba(0,0,0,.2);
    108.         margin-right: 4px;
    109.     }
    110.     .demo-upload-list img{
    111.         width: 100%;
    112.         height: 100%;
    113.     }
    114.     .demo-upload-list-cover{
    115.         display: none;
    116.         position: absolute;
    117.         top: 0;
    118.         bottom: 0;
    119.         left: 0;
    120.         right: 0;
    121.         background: rgba(0,0,0,.6);
    122.     }
    123.     .demo-upload-list:hover .demo-upload-list-cover{
    124.         display: block;
    125.     }
    126.     .demo-upload-list-cover i{
    127.         color: #fff;
    128.         font-size: 20px;
    129.         cursor: pointer;
    130.         margin: 0 2px;
    131.     }
    132. </style>

    API

    Upload props

    属性说明类型默认值
    action上传的地址，必填String-
    headers设置上传的请求头部Object{}
    multiple是否支持多选文件Booleanfalse
    paste是否支持粘贴上传文件Booleanfalse
    disabled 3.3.0是否禁用Booleanfalse
    data上传时附带的额外参数Object-
    name上传的文件字段名Stringfile
    with-credentials支持发送 cookie 凭证信息Booleanfalse
    show-upload-list是否显示已上传文件列表Booleantrue
    type上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）Stringselect
    accept接受上传的文件类型String-
    format支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用Array[]
    max-size文件大小限制，单位 kbNumber-
    before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传Function-
    on-progress文件上传时的钩子，返回字段为 event, file, fileListFunction-
    on-success文件上传成功时的钩子，返回字段为 response, file, fileListFunction-
    on-error文件上传失败时的钩子，返回字段为 error, file, fileListFunction-
    on-preview点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据Function-
    on-remove文件列表移除文件时的钩子，返回字段为 file, fileListFunction-
    on-format-error文件格式验证失败时的钩子，返回字段为 file, fileListFunction-
    on-exceeded-size文件超出指定大小限制时的钩子，返回字段为 file, fileListFunction-
    default-file-list 默认已上传的文件列表，例如：
    1.                                     [    {        name: 'img1.jpg',        url: 'http://www.xxx.com/img1.jpg&#39;    },    {        name: 'img2.jpg',        url: 'http://www.xxx.com/img2.jpg&#39;    }]
    		Array[]

    Upload methods

    方法名说明参数
    clearFiles清空已上传的文件列表无

    Upload slot

    名称说明
    无触发上传组件的控件
    tip辅助提示内容