antd vue type check failed for prop “fileList“. Expected Array, got Function
我这个是在使用上传组件的时候报了这个错这个错的意思就是,检查 fileList 这个属性,期望的是数组,结果获取到的是个函数。组件要求这个属性是个数组类型的正确的写法:附源码,上传的那个函数是自己封装的。<template><div><a-modal title="附件上传" :visible="visible" :footer="null" @cancel="han
·
我这个是在使用上传组件的时候报了这个错
这个错的意思就是,检查 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新手一个,所以搞这种错
更多推荐
已为社区贡献3条内容
所有评论(0)