Upload 上传

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

何时使用

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。

  • 当需要上传一个或一些文件时。
  • 当需要展现上传的进度时。
  • 当需要使用拖拽交互时。

代码演示

点击上传

经典款式，用户点击按钮弹出文件选择框。

  1. <template>
  2.   <v-upload :name="name" :action="action" @change="onChange">
  3.     <v-button type="ghost">
  4.       <v-icon type="upload"></v-icon>点击上传
  5.     </v-button>
  6.   </v-upload>
  7. </template>
  9. <script>
  10.   export default {
  11.     data: ()=> ({
  12.       name: 'file',
  13.       action: '/upload'
  14.     }),
  15.     methods: {
  16.       onChange(info) {
  17.         if (info.file.status !== 'uploading') {
  18.           console.log(info.file, info.fileList)
  19.         }
  20.         if (info.file.status === 'done') {
  21.           console.log(info.file.name + ' 上传成功.')
  22.         } else if (info.file.status === 'error') {
  23.           console.log(info.file.name + ' 上传失败.')
  24.         }
  25.       }
  26.     }
  27.   }
  28. </script>

点击上传

设置头信息。

  1. <template>
  2.   <v-upload :name="name" :action="action" :header='header' @change="onChange">
  3.     <v-button type="ghost">
  4.       <v-icon type="upload"></v-icon>点击上传
  5.     </v-button>
  6.   </v-upload>
  7. </template>
  9. <script>
  10.   export default {
  11.     data: ()=> ({
  12.       name: 'file',
  13.       action: '/upload',
  14.       header: {
  15.         appkey: 'FDF8F7DSFSD8FSA987A8SF',
  16.       },
  17.     }),
  18.     methods: {
  19.       onChange(info) {
  20.         if (info.file.status !== 'uploading') {
  21.           console.log(info.file, info.fileList)
  22.         }
  23.         if (info.file.status === 'done') {
  24.           console.log(info.file.name + ' 上传成功.')
  25.         } else if (info.file.status === 'error') {
  26.           console.log(info.file.name + ' 上传失败.')
  27.         }
  28.       }
  29.     }
  30.   }
  31. </script>

传入已上传的文件

对已上传的文件进行编辑。

  1. <template>
  2.   <v-upload :name="name" :action="action" :file-list="defaultFileList" @change="onChange">
  3.     <v-button type="ghost">
  4.         <v-icon type="upload"></v-icon>上传
  5.       </v-button>
  6.   </v-upload>
  7. </template>
  9. <script>
  10.   export default {
  11.     data: ()=> ({
  12.       name: 'file',
  13.       action: '/upload',
  14.       defaultFileList: [{
  15.         uid: -1,
  16.         name: 'xxx.png',
  17.         status: 'done',
  18.         url: 'http://www.baidu.com/xxx.png'
  19.       }, {
  20.         uid: -2,
  21.         name: 'yyy.png',
  22.         status: 'done',
  23.         url: 'http://www.baidu.com/yyy.png'
  24.       }]
  25.     }),
  26.     methods: {
  27.       onChange(info) {
  28.         if (info.file.status !== 'uploading') {
  29.           console.log(info.file, info.fileList)
  30.         }
  31.         if (info.file.status === 'done') {
  32.           console.log(info.file.name + ' 上传成功.')
  33.         } else if (info.file.status === 'error') {
  34.           console.log(info.file.name + ' 上传失败.')
  35.         }
  36.       }
  37.     }
  38.   }
  39. </script>

拖拽上传1

可以把文件拖入指定区域，完成上传，同样支持点击上传。

  1. <template>
  2.   <v-upload :name="name" :action="action" drag @change="onChange">
  3.     <p class="ant-upload-drag-icon">
  4.         <v-icon type="inbox"></v-icon>
  5.     </p>
  6.     <p class="ant-upload-text">点击或将文件拖拽到此区域上传</p>
  7.     <p class="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
  8.   </v-upload>
  9. </template>
  11. <script>
  12.   export default {
  13.     data: ()=> ({
  14.       name: 'file',
  15.       action: '/upload'
  16.     }),
  17.     methods: {
  18.       onChange(info) {
  19.         if (info.file.status !== 'uploading') {
  20.           console.log(info.file, info.fileList)
  21.         }
  22.         if (info.file.status === 'done') {
  23.           console.log(info.file.name + ' 上传成功.')
  24.         } else if (info.file.status === 'error') {
  25.           console.log(info.file.name + ' 上传失败.')
  26.         }
  27.       }
  28.     }
  29.   }
  30. </script>

拖拽上传2

可以把文件拖入指定区域，完成上传，同样支持点击上传。

  1. <template>
  2.   <div style="width: 246px; height: 146px">
  3.       <v-upload :name="name" :action="action" drag @change="onChange">
  4.           <v-icon type="plus"></v-icon>
  5.       </v-upload>
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     data: ()=> ({
  12.       name: 'file',
  13.       action: '/upload'
  14.     }),
  15.     methods: {
  16.       onChange(info) {
  17.         if (info.file.status !== 'uploading') {
  18.           console.log(info.file, info.fileList)
  19.         }
  20.         if (info.file.status === 'done') {
  21.           console.log(info.file.name + ' 上传成功.')
  22.         } else if (info.file.status === 'error') {
  23.           console.log(info.file.name + ' 上传失败.')
  24.         }
  25.       }
  26.     }
  27.   }
  28. </script>

多文件上传

可以选择多个文件上传。

  1. <template>
  2.   <v-upload :name="name" :action="action" multiple @change="onChange">
  3.     <v-button type="ghost">
  4.       <v-icon type="upload"></v-icon>点击上传
  5.     </v-button>
  6.   </v-upload>
  7. </template>
  9. <script>
  10.   export default {
  11.     data: ()=> ({
  12.       name: 'file',
  13.       action: '/upload'
  14.     }),
  15.     methods: {
  16.       onChange(info) {
  17.         if (info.file.status !== 'uploading') {
  18.           console.log(info.file, info.fileList)
  19.         }
  20.         if (info.file.status === 'done') {
  21.           console.log(info.file.name + ' 上传成功.')
  22.         } else if (info.file.status === 'error') {
  23.           console.log(info.file.name + ' 上传失败.')
  24.         }
  25.       }
  26.     }
  27.   }
  28. </script>

API

Upload Props

属性说明类型默认值
name可选参数, 上传的文件stringfile
action必选参数, 上传的地址string-
fileList默认已经上传的文件列表object[][]
data可选参数, 上传所需参数object{}
header可选参数, 设置request头信息object{}
beforeUpload上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。注意：该方法不支持老 IE(file, reqOptions) => booleanPromise
multiple可选参数, 是否支持多选文件booleanfalse
accept可选参数, 接受上传的文件类型, 详见 input accept Attributestring-

Upload Events

事件说明参数
change可选参数, 上传文件改变时的状态，详见 onChangefileInfo

onChange

文件状态改变的回调，返回为：

  1. {
  2.   file: { ... },
  3.   fileList: [ ... ],
  4.   event: { ... }
  5. }

1.file 当前操作的文件对象。

  1. {
  2.   uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
  3.   name: 'xx.png'   // 文件名
  4.   status: 'done',  // 状态有：uploading done error removed
  5.   response: '{"status":"success"}'  // 服务端响应内容
  6. }

如果上传控件是 multiple 时，此参数将为一个对象数组 [file, …]。2.fileList 当前的文件列表。3.event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

显示下载链接

请使用 fileList 属性设置数组项的 url 属性进行展示控制。