基础配置

配置 类型 默认值 备注
inline Boolean false 是否是行内显示
v-model object null ```javascript { // required attachId: { // required files: [{ fileCode: '', orgFileName: '', url: '', // not required ... }], // not required insertFiles: [{ fileCode: '', orgFileName: '', url: '', // not required ... }], insertCodes: ['', ''] } } ``` 
      </td>
    </tr>
    <tr>
      <td>mode</td>
      <td>String</td>
      <td>'single'</td>
      <td>'single' / 'multiple' / 'picture' / 'picture-card' / 'avatar'</td>
    </tr>
    <tr>
      <td>updating</td>
      <td>Boolean</td>
      <td>false</td>
      <td>是否是编辑状态</td>
    </tr>
    <tr>
      <td>size</td>
      <td>number</td>
      <td>2</td>
      <td>单位MB，小于1MB自动显示为KB</td>
    </tr>
    <tr>
      <td>drag</td>
      <td>Boolean</td>
      <td>false</td>
      <td>是否拖拽文件上传</td>
    </tr>
    <tr>
      <td>accept</td>
      <td>String</td>
      <td>''</td>
      <td>接受的文件类型，逗号隔开，如'jpg,png,docx,ppt'</td>
    </tr>
    <tr>
      <td>mime</td>
      <td>String</td>
      <td>''</td>
      <td>作为accept的补充，接受的文件类型，逗号隔开，如'image/bmp,video/quicktime'</td>
    </tr>
    <tr>
      <td>preview</td>
      <td>Boolean</td>
      <td>false</td>
      <td>点击图片是否打开预览，仅:updating="false"或:use-btn="true"时有效</td>
    </tr>
    <tr>
      <td>on-progress</td>
      <td>(event:事件, percent:上传百分比)=>{}</td>
      <td></td>
      <td>上传进度事件</td>
    </tr>

方法

方法名 定义 备注
complete ():Promise<uploader:组件本身> 确认附件变更
refresh ():Promise<void> 重新加载附件列表
getStatus ():Object 获取组件状态
getFileList ():Array 获取文件列表

mode=”avatar”

配置

配置 类型 默认值 备注
fit Boolean 'contain' 图片显示方式，可选'fill' / 'contain' / 'cover'
use-btn Boolean false 是否使用按钮上传的方式
remove-btn Boolean false 是否出现删除按钮
placeholder String '' 使用文字提示

插槽

slot 备注
avatar 显示图像的区域
empty 没有图像的区域
placeholder 鼠标聚焦的区域，仅:updating="false"时有效
upload-btn 按钮区域
trigger 触发区域

默认

<p-uploader
  v-model="dataAvatarDefault"
  mode="avatar"
  style="width: 200px; height: 200px; border: 1px solid #ddd;"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarDefaultFiles = files
    }
  ">
</p-uploader>

fit=”cover”

<p-uploader
  v-model="dataAvatarDefault"
  mode="avatar"
  fit="cover"
  style="width: 200px; height: 200px;"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarDefaultFiles = files
    }
  ">
</p-uploader>

fit=”fill”

<p-uploader
  v-model="dataAvatarDefault"
  mode="avatar"
  fit="fill"
  style="width: 200px; height: 200px;"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarDefaultFiles = files
    }
  ">
</p-uploader>

preview

<p-uploader
  v-model="dataAvatarDefault"
  mode="avatar"
  :preview="true"
  style="width: 200px; height: 200px; border: 1px solid #ddd;"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarDefaultFiles = files
    }
  ">
</p-uploader>

updating

<p-uploader
  v-model="dataAvatar"
  mode="avatar"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarUpdating"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarUpdating.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarUpdating.complete()" style="margin-top: 10px;">确认</el-button>

size

<p-uploader
  v-model="dataAvatarSize"
  mode="avatar"
  :size="0.5"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarSize"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarSize.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarSize.complete()" style="margin-top: 10px;">确认</el-button>

accept

<p-uploader
  v-model="dataAvatarAccept"
  mode="avatar"
  accept="png,docx"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarAccept"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarAccept.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarAccept.complete()" style="margin-top: 10px;">确认</el-button>

accept + mime

<p-uploader
  v-model="dataAvatarAcceptMime"
  mode="avatar"
  accept="png,docx"
  mime="image/bmp"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarAcceptMme"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarAcceptMme.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarAcceptMme.complete()" style="margin-top: 10px;">确认</el-button>

use-btn

<p-uploader
  v-model="dataAvatarUseBtn"
  mode="avatar"
  :use-btn="true"
  fit="cover"
  :updating="true"
  style="width: 170px; height: 220px;"
  ref="avatarUseBtn"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarUseBtn.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarUseBtn.complete()" style="margin-top: 10px;">确认</el-button>

remove-btn

<p-uploader
  v-model="dataAvatarRemoveBtn"
  mode="avatar"
  :remove-btn="true"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarRemoveBtn"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarRemoveBtn.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarRemoveBtn.complete()" style="margin-top: 10px;">确认</el-button>

placeholder

<p-uploader
  v-model="dataAvatarPlaceholder"
  mode="avatar"
  placeholder="修改"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarPlaceholder"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarPlaceholder.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarPlaceholder.complete()" style="margin-top: 10px;">确认</el-button>

slot=”avatar”

<p-uploader
  v-model="dataAvatarSlotAvatar"
  mode="avatar"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarSlotAvatar"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
  <tpl slot="avatar" slot-scope="{ value }">
    <img v-show="value" :src="value" style="width: 100%; height: 100%; border-radius: 50%;" />
  </tpl>
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarSlotAvatar.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarSlotAvatar.complete()" style="margin-top: 10px;">确认</el-button>

slot=”empty”

<p-uploader
  v-model="dataAvatarSlotEmpty"
  mode="avatar"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarSlotEmpty"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
  <div slot="empty">
    <i class="el-icon-fork-spoon" style="font-size: 3em;"></i>
  </div>
</p-uploader>
    <el-button type="primary" v-on:click="$refs.avatarSlotEmpty.refresh()" style="margin-top: 10px;">重新加载</el-button>
    <el-button type="primary" v-on:click="$refs.avatarSlotEmpty.complete()" style="margin-top: 10px;">确认</el-button>

slot=”placeholder”

<p-uploader
  v-model="dataAvatarSlotPlaceholder"
  mode="avatar"
  fit="cover"
  :updating="true"
  style="width: 200px; height: 200px;"
  ref="avatarSlotPlaceholder"
  v-on:on-change="
    (uploader, files) => {
      this.dataAvatarFiles = files
    }
  ">
  <div slot="placeholder" style="width: 100%; height: 100%; background: rgba(255, 0, 0, 0.5);"></div>
</p-uploader>
<el-button type="primary" v-on:click="$refs.avatarSlotPlaceholder.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.avatarSlotPlaceholder.complete()" style="margin-top: 10px;">确认</el-button>

mode=”single”

默认

<p-uploader
  v-model="dataSingleDefault"
  mode="single"
  v-on:on-change="
    (uploader, files) => {
      this.dataSingleDefaultFiles = files
    }
  ">
</p-uploader>

updating

<p-uploader
  v-model="dataSingle"
  mode="single"
  :updating="true"
  ref="singleUpdating"
  v-on:on-change="
    (uploader, files) => {
      this.dataSingleFiles = files
      uploader.complete()
    }
  ">
</p-uploader>

mode=”multiple”

配置

配置 类型 默认值 备注
limit number 0 限制上传文件数量

默认

<p-uploader
  v-model="dataMultipleDefault"
  mode="multiple"
  v-on:on-change="
    (uploader, files) => {
      this.dataMultipleDefaultFiles = files
    }
  ">
</p-uploader>

updating

<p-uploader
  v-model="dataMultiple"
  mode="multiple"
  :updating="true"
  ref="multipleUpdating"
  v-on:on-change="
    (uploader, files) => {
      this.dataMultipleFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.multipleUpdating.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.multipleUpdating.complete()" style="margin-top: 10px;">确认</el-button>

limit

<p-uploader
  v-model="dataMultipleLimit"
  mode="multiple"
  :updating="true"
  :limit="2"
  ref="multipleLimit"
  v-on:on-change="
    (uploader, files) => {
      this.dataMultipleFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.multipleLimit.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.multipleLimit.complete()" style="margin-top: 10px;">确认</el-button>

size

<p-uploader
  v-model="dataMultipleSize"
  mode="multiple"
  :updating="true"
  :size="0.5"
  ref="multipleSize"
  v-on:on-change="
    (uploader, files) => {
      this.dataMultipleFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.multipleSize.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.multipleSize.complete()" style="margin-top: 10px;">确认</el-button>

accept

<p-uploader
  v-model="dataMultipleAccept"
  mode="multiple"
  accept="png,docx"
  :size="1"
  :updating="true"
  ref="multipleAccept"
  v-on:on-change="
    (uploader, files) => {
      this.dataMultipleFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.multipleAccept.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.multipleAccept.complete()" style="margin-top: 10px;">确认</el-button>

accept+mime

<p-uploader
  v-model="dataMultipleAcceptMime"
  mode="multiple"
  accept="png,docx"
  mime="image/bmp"
  :size="1"
  :updating="true"
  ref="multipleAcceptMime"
  v-on:on-change="
    (uploader, files) => {
      this.dataMultipleFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.multipleAcceptMime.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.multipleAcceptMime.complete()" style="margin-top: 10px;">确认</el-button>

mode=”picture”

测试数据

默认

<p-uploader
  v-model="dataPictureDefault"
  mode="picture"
  v-on:on-change="
    (uploader, files) => {
      this.dataPictureDefaultFiles = files
    }
  ">
</p-uploader>

updating

<p-uploader
  v-model="dataPicture"
  mode="picture"
  :updating="true"
  ref="picture"
  v-on:on-change="
    (uploader, files) => {
      this.dataPictureFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.picture.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.picture.complete()" style="margin-top: 10px;">确认</el-button>

mode=”picture-card”

默认

<p-uploader
  v-model="dataPictureCardDefault"
  mode="picture-card"
  v-on:on-change="
    (uploader, files) => {
      this.dataPictureCardDefaultFiles = files
    }
  ">
</p-uploader>

updating

<p-uploader
  v-model="dataPictureCard"
  mode="picture-card"
  :updating="true"
  ref="pictureCard"
  v-on:on-change="
    (uploader, files) => {
      this.dataPictureCardFiles = files
    }
  ">
</p-uploader>
<el-button type="primary" v-on:click="$refs.pictureCard.refresh()" style="margin-top: 10px;">重新加载</el-button>
<el-button type="primary" v-on:click="$refs.pictureCard.complete()" style="margin-top: 10px;">确认</el-button>
文档更新时间: 2021-05-12 18:42   作者：管理员