Uploader
Install

安装

  <uploader
    v-model="fileList"
    :url="remoteUrl"
    name="upload"
    title="自动上传"
    :params="{
      token: '13579',
      linkid: '2323',
      modelname: 'modelname'
    }"
    :headers="{
      'custom-header': 'custom-info',
    }"
    :limit="6"
    :limitPrompt="limit => `已经上传${limit}张图片嘞!`"
    withCredentials
    @before-upload="beforeUpload"
    @after-upload="afterUpload"
    @on-change="onChange"
    @on-cancel="onCancel"
    @on-success="onSuccess"
    @on-error="onError"
    @on-delete="onDelete"
  />

API

属性

名字类型默认值说明版本要求
titlestring图片上传组件标题--
filesarray[]初始化数据源,通过on-fileList-change事件绑定 v-model--
limitnumber
string
5限制上传图片个数--
limitPromptfunction(limit) => `不能上传超过${limit}张图片`限制上传alert的提示语--
capturenumber
string
false是否只选择调用相机--
enableCompressbooleantrue是否压缩--
maxWidthstring
number
1024图片压缩最大宽度--
qualitystring
number
0.92图片压缩率--
urlstring上传服务器 url--
headersobject{}上传文件时自定义请求头--
withCredentialsboolean设置为true的话,支持标准CORS设置cookie值--
paramsobject上传文件时自定义参数--
namestringfile上传文件时 FormData 的 Key,默认为 file--
autoUploadbooleantrue是否自动开启上传--
multiplestring
boolean
是否支持多选, false为不支持--
readonlybooleanfalse只读模式(隐藏添加和删除按钮)--

事件

名字参数说明版本要求
@on-change(FileItem, FileList)选完照片,删除照片时,FileList 变化时触发,返回当前改变的 FileItem,以及当前的 FileList--
@on-cancel--选择照片后取消的回调,用于错误提示--
@on-success(result, fileItem)上传请求成功后的回调,返回远程请求的返回结果,及当前添加文件的 FileItem--
@on-error(xhr)上传请求失败后的回调,返回xhr--
@on-delete(cb)上传删除照片时的回调,返回隐藏 Previewer,删除图片的回调,没监听onDelete事件的时候,直接执行删除回调--
@before-upload--上传图片之前的回调--
@after-upload(action)上传图片之后的回调--


贡献者

贡献者

该组件(包含文档)迭代次数 1,贡献人数 1

Bobjoy