上传组件 Uploader

基本用法

上传组件 Uploader - 图1

  1. <template lang="html">
  2. <main>
  3. <div class="demo-hidden">
  4. <za-panel>
  5. <za-panel-header title="点击一次选择单张"></za-panel-header>
  6. <za-panel-body>
  7. <div class="uploader-wrapper" style="display:flex;padding:15px;">
  8. <za-badge sup v-for= '(i, index) in files' class="uploader-item" shape='circle' :key='index' @click='remove(index)' style="display:inline-block;margin-right:15px;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;">
  9. <za-icon type='wrong' slot='text' ></za-icon>
  10. <div class='uploader-item-img'>
  11. <a :href="i.thumbnail" target="_blank"><img :src="i.thumbnail" alt=""></a>
  12. </div>
  13. </za-badge>
  14. <div class="uploader-wrapper">
  15. <za-uploader
  16. class="uploader-btn" style="display:flex;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;"
  17. accept="image/jpg, image/jpeg, image/gif, image/png"
  18. @change='handleChange'>
  19. <za-icon type="add" style="fontSize:30px;"/>
  20. </za-uploader>
  21. </div>
  22. </div>
  23. </za-panel-body>
  24. </za-panel>
  25. <za-panel>
  26. <za-panel-header title="点击一次选择多张"></za-panel-header>
  27. <za-panel-body>
  28. <div class="uploader-wrapper" style="display:flex;padding:15px;">
  29. <za-badge sup v-for= '(i, index) in fileList' class="uploader-item" shape='circle' :key='index' @click='remove2(index)' style="display:inline-block;margin-right:15px;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;">
  30. <za-icon type='wrong' slot='text'></za-icon>
  31. <div class='uploader-item-img'>
  32. <a :href="i.thumbnail" target="_blank"><img :src="i.thumbnail" alt=""></a>
  33. </div>
  34. </za-badge>
  35. <div class="uploader-wrapper">
  36. <za-uploader
  37. v-if='fileList.length < 5'
  38. multiple
  39. class="uploader-btn"
  40. style="display:flex;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;"
  41. :before-change='beforeChange'
  42. accept="image/jpg, image/jpeg, image/gif, image/png"
  43. @change='handleChangeMulti'>
  44. <za-icon type="add" />
  45. </za-uploader>
  46. </div>
  47. </div>
  48. </za-panel-body>
  49. </za-panel>
  50. </div>
  51. <za-toast :visible.sync='visible' :duration='1000'>删除成功</za-toast>
  52. </main>
  53. </template>
  54. <script>
  55. export default {
  56. data() {
  57. return {
  58. files: [],
  59. fileList: [],
  60. visible: false,
  61. }
  62. },
  63. methods: {
  64. handleChange(data){
  65. console.log(data);
  66. this.files.push(data)
  67. },
  68. handleChangeMulti(dataList){
  69. if(dataList.length + this.fileList.length > 5){
  70. alert('超过5张')
  71. this.fileList = this.fileList.concat(...(dataList.slice(0, 5 - this.fileList.length)));
  72. }else{
  73. this.fileList = this.fileList.concat(...dataList);
  74. }
  75. },
  76. remove(index){
  77. this.files.splice(index, 1);
  78. this.visible = true
  79. },
  80. remove2(index){
  81. this.fileList.splice(index, 1);
  82. this.visible = true
  83. },
  84. beforeChange(){
  85. if(this.fileList.length > 5){
  86. alert('超过5张')
  87. return false
  88. }else{
  89. alert('before change')
  90. }
  91. }
  92. },
  93. };
  94. </script>

API

Uploader

属性类型默认值可选值/参数说明
prefixClsstringza-uploader类名前缀
acceptstring允许上传的附件格式
multipleboolfalse是否多选
capturestring照相机camera, 摄像机camcorder, 录音microphone唤起的原生应用
disabledboolfalse是否禁用
before-changefunc选择前触发的回调

Uploader Event

事件名称说明回调参数
change选择文件后触发的事件1.file对象