antd vue type check failed for prop “fileList“. Expected Array, got Function

我这个是在使用上传组件的时候报了这个错

这个错的意思就是,检查 fileList 这个属性,期望的是数组,结果获取到的是个函数。组件要求这个属性是个数组类型的

在这里插入图片描述

正确的写法:
在这里插入图片描述

附源码,上传的那个函数是自己封装的。

<template>
<div>
  <a-modal title="附件上传" :visible="visible" :footer="null" @cancel="handleCancel">
    <a-upload
        name="file"
        :multiple="true"
        :fileList="fileList"
        :remove="handleDownloadFileRemove"
        :customRequest="downloadFilesCustomRequest"
        accept="image/png, image/jpeg, image/jpg"
    >
      <a-button> <a-icon type="upload" /> 附件上传 </a-button>
    </a-upload>
  </a-modal>
</div>
</template>

<script>
import {UploadImg} from "../../api";

export default {
  name: "FileUpload",
  props:{
    id:{
      required:true,
      default:'',
    },
    visible:{
      required: true,
      default: false,
    }
  },
  data(){
    return{
      defaultFileList:[],
      fileList:[],
    }
  },
  methods:{
    handleCancel(){
      //通知父组件关闭弹窗
      console.log("关闭弹窗");
    },
    // 重写a-upload的文件上传处理方式
    downloadFilesCustomRequest (data) {
      this.saveFile(data)
    },
    downloadFiles(e){
      console.log("返回文件列表");
      console.dir(e);
      this.fileList = [];
    },
    // 上传并保存文件
    saveFile (data){
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append("id",this.id);
      UploadImg(formData).then((res) => {  // 发送http请求
        if (res.code === 0){
          let file = this.fileFormatter(res.data)
          // 上传单个文件后,将该文件会先到a-upload组件的已上传文件列表中的操作
          this.downloadFiles.push(file)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 对上传成功返回的数据进行格式化处理,格式化a-upload能显示在已上传列表中的格式(这个格式官方文档有给出的)
    fileFormatter(data) {
      let file = {
        uid: data.uuid,    // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
        name: data.name,   // 文件名
        status: 'done', // 状态有:uploading done error removed
        response: '{"status": "success"}', // 服务端响应内容
      }
      return file
    },
    // 没错,删除某个已上传的文件的时候,就是调用的这里
    handleDownloadFileRemove (file) {
      const index = this.downloadFiles.indexOf(file)
      const newFileList = this.downloadFiles.slice()
      newFileList.splice(index, 1)
      this.downloadFiles = newFileList
    }
  }
}
</script>

<style scoped>

</style>

vue新手一个,所以搞这种错

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值