文件上传组件的使用a-upload

<a-upload
  name="taskFlowpicName"
  accept=".jpg"                      // 可接受的文件
  //v-model="baseInfo.taskFlowpicUrl"  // 绑定的url
  :fileList="FlowPicList"            // 上传的文件信息 相当于v-model双向绑定
  :remove="FlowPicRemove"            // 移除文件的方法
  :beforeUpload="beforeFlowPicFileUpload"  // 上次之前的函数钩子
  :customRequest="uploadFlowPic"           // 上次文件的函数钩子
  list-type="picture"
  class="upload-list-inline"
  >
	<a-button> <a-icon :component="IconUpload" /> 上传文件 </a-button>
</a-upload>
//this.FlowPicList = this.FlowPicList = [{
//  uid: this.baseInfo.taskFlowpicUrl,
//  name: this.baseInfo.taskFlowpicName,
//  status: 'done',
//  url: this.baseInfo.taskFlowpicUrl
//}]

// 上传办理流程图文件前的狗子
    beforeFlowPicFileUpload (file) {
      let isAllowed = true
      if (file && file.size === 0) {
        isAllowed = false
        this.$message.error('文件大小不能为0!')
        return isAllowed
      }
      const type = ['jpg']
      if (!type.includes((file.name.split('.')[file.name.split('.').length - 1]).toLowerCase())) {
        isAllowed = false
        this.$message.error('格式不正确')
        return isAllowed
      }
      if (this.FlowPicList.length >= 1) {
        isAllowed = false
        this.$message.error('已存在办理流程图,只允许上传1个!')
        return isAllowed
      }
      return isAllowed
    },
    // 上传办理流程图文件方法
    uploadFlowPic (file) {
      const form = new FormData()
      form.append('file', file.file)
      itemApi.uploadFile(form).then(res => {
        if (res.success) {
          // 调用组件内方法, 设置为成功状态
          file.onSuccess(res, file.file)
          file.status = 'done'
          this.FlowPicList = [{
            uid: res.data.fileUrl,
            name: file.file.name,
            status: 'done',
            url: res.data.fileUrl
          }]
          this.baseInfo.taskFlowpicName = file.file.name
          this.baseInfo.taskFlowpicUrl = res.data.fileUrl
        } else {
          file.onError()
          file.status = 'error'
        }
      })
      this.fileChange = true
    },
	// 删除办理流程图
    FlowPicRemove (file) {
      this.FlowPicList.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.FlowPicList.splice(index, 1)
        }
      })
      this.baseInfo.taskFlowpicUrl = ''
      this.baseInfo.taskFlowpicName = ''
      this.fileChange = true
    },

image
如果下面图标要显示,需要将上传的文件信息数据赋值

this.FlowPicList = [{
    uid: res.data.fileUrl,
    name: file.file.name,
    status: 'done',
    url: res.data.fileUrl
}]
posted @ 2022-10-13 11:09  嘿!那个姑娘  阅读(2673)  评论(0编辑  收藏  举报