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 {
  8. }
  9. </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 {
  10. }
  11. </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

拖拽上传

设置属性 typedrag,可以拖拽上传。

  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 {
  14. }
  15. </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辅助提示内容