PmUpload

介绍PmUpload的使用

基础使用

<template>
  <pm-upload
    uploadUrl="https://jsonplaceholder.typicode.com/posts/"
    :removeAction="removeAction"
    :autoUpload="false"
  ></pm-upload>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    removeAction() {

    }
  }
}
</script>

显示代码 复制代码 复制代码

FileList

基础使用

<template>
  <pm-upload
    :fileList.sync="fileList"
    uploadUrl="https://jsonplaceholder.typicode.com/posts/"
    :removeAction="removeAction"
  ></pm-upload>
</template>
<script>
export default {
  data () {
    return {
      fileList: [
        {
          name: '这是一个名字很长dddddname.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          fileId: '这是一个名字很长的name'
        },
        {
          name: 'food2food2food2food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          fileId: 'food2'
        }
      ]
    }
  },
  methods: {
    async removeAction() {
      return {
      }
    }
  }
}
</script>

显示代码 复制代码 复制代码

Elemennt-UI doc (opens new window)

Attributes

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	—	false
editable	是否可编辑	boolean	-	true
getFileUrl	文件实体中获取路径	function	-	file.url
uploadUrl	上传文件的地址	string	-	-
readonly	只读	boolean	-	false
urlField	上传url的key	string	-	url
removeAction	删除文件	function	-	-
removeLoading	上传时显示loading	boolean	-	false
fileList	文件列表例：{ name: '这是一个名字很长dddddname.jpeg', url: '', fileId: 'id' }	array	-	[]
responseField	上传成功之后返回的字段名	string	-	attachments
uploadData	上传时附带的额外参数	object	-	-
autoUpload	是否在选取文件后立即进行上传	boolean	-	true
showFileList	是否显示已上传文件列表	boolean	-	true
responseFormater	返回值处理回调	function	-	null

Slot

Name	Description
tip	文件上传成功的提示

Events

事件名称	说明	回调参数
uploadSuccess	上传成功的回调	—
removeAction	删除图片的方法 需要是一个 async 类型的函数	—
handleError	上传失败的回调	err, file, fileList

fileList(Object)

参数	说明	类型	可选值	默认值
name	图片名称	string	—	—
url	图片路径	string	—	—
fileId	唯一标示用于循环的key 删除操作的标示	string	—	—