Q-Upload 文件上传

基础用法

提示

支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

Q-Upload 基于 El-Upload (opens new window)进行封装，使用 isButton 属性设置其为按钮形式或拖拽，默认拖拽形式

注意

该组件只为示例，不能进行在线文件上传，逻辑需自己处理。

<template>
  <QUpload style="margin: 10px;height: 100px;" :headers="headers"
           :isButton="true" :action="action" :baseUrl="baseUrl"
           @input="handleUpload" ref="upload"/>
</template>
<script>
  export default {
    data() {
      return {
        action: '',  //process.env.VUE_APP_BASE_API + "/common/upload"
        baseUrl: '', //process.env.VUE_APP_BASE_API 
        headers: {
          Authorization: "Bearer ",
          //Authorization: "Bearer " + getToken(),
        },
      }
    },
    methods: {
      handleUpload(fileList) {

      }
    }
  }
</script>

Expand Copy Copy

图片上传

<template>
  <QUpload is-button :base-url="ENUM.UPLOAD.BASEURL" list-type="picture-card" ref="imgUpload"
           :action="ENUM.UPLOAD.ACTION" :headers="header" 
           :is-show-tip="false" @input="getImgList" :show-file-list="true"
  >
  </QUpload>
</template>
<script>
  export default {
    data() {
      return {
        action: '',  //process.env.VUE_APP_BASE_API + "/common/upload"
        baseUrl: '', //process.env.VUE_APP_BASE_API 
        header: {
          Authorization: "Bearer ",
          //Authorization: "Bearer " + getToken(),
        },
        ENUM:{
          UPLOAD:{
            BASEURL:'',
            ACTION:''
          }
        }
      }
    },
    methods: {
      getImgList(fileList) {

      }
    }
  }
</script>

Expand Copy Copy

拖拽上传

<template>
  <QUpload style="margin: 10px;" :headers="headers"
           :action="action" :baseUrl="baseUrl"
           @input="handleUpload" ref="upload"/>
</template>
<script>
  export default {
    data() {
      return {
        action: '',  //process.env.VUE_APP_BASE_API + "/common/upload"
        baseUrl: '', //process.env.VUE_APP_BASE_API 
        headers: {
          Authorization: "Bearer ",
          //Authorization: "Bearer " + getToken(),
        },
      }
    },
    methods: {
      handleUpload(fileList) {

      }
    }
  }
</script>

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
v-model	双向绑定	Array	—	—
action	上传路径	String	process.env.VUE_APP_BASE_API + "/common/upload" 必填
baseUrl	路径前缀	String	process.env.VUE_APP_BASE_API	必填
headers	标头	Object	—	必填
limit	文件数量限制	Number	—	5
fileSize	文件大小限制(MB)	Number	—	100
fileType	文件可上传类型	Number	例['png', 'jpg', 'jpeg']	—
isShowTip	是否显示提示	Boolean	true / false	true
isButton	是否按钮方式	Boolean	true / false	false
multiple	是否多选	Boolean	true / false	true
listType	文件列表的类型	String	text/picture/picture-card	text
showFileList	是否显示已上传文件列表(图片)	Boolean	true / false	false
showGroup	是否显示已上传文件列表(文件)	Boolean	true / false	false
showPreview	是否显示预览 (listType为picture-card)	Boolean	true / false	false

Events

事件名	说明	回调参数	参数说明
input	文件增加或删除时触发的事件	fileList	所有文件数据
preview	图片点击预览 (listType为picture-card) (showPreview为True)	file	当前文件数据

Slots

属性名	说明
button	自定义上传按钮