不能将类型“(file: UploadFile) => void”分配给类型“() => void”。

Question

请问如下报错该怎么排查？

<template>
    <div>
        <!-- validate-on-rule-change="false"不需要一进来就验证 -->
        <el-form
            ref="form"
            v-if="model"
            :validate-on-rule-change="false"
            :model="model"
            :rules="rules"
            v-bind="$attrs"
        >
            <template v-for="(item, index) in options" :key="index">
                <el-form-item
                    :prop="item.prop"
                    :label="item.label"
                    v-if="!item.children || !item.children!.length"
                >
                    <component
                        v-if="item.type !== 'upload'"
                        :placeholder="item.placeholder"
                        v-bind="item.attrs"
                        :is="`el-${item.type}`"
                        v-model="model[item.prop!]"
                    ></component>
                    <el-upload
                        v-bind="item.uploadAttrs"
                        :on-preview="onPreview"
                        :on-remove="onRemove"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :on-progress="onProgress"
                        :on-change="onChange"
                        :before-remove="beforeRemove"
                        :before-upload="beforeUpload"
                        :http-request="httpRequest"
                        :on-exceed="onExceed"
                        v-else
                    >
                        <!-- 给用户提示的区域 -->
                        <slot name="uploadArea"></slot>
                        <!-- 给用户提示的文字 -->
                        <slot name="uploadTip"></slot>
                    </el-upload>
                </el-form-item>
                <el-form-item
                    :prop="item.prop"
                    :label="item.label"
                    v-if="item.children && item.children.length"
                >
                    <component
                        v-bind="item.attrs"
                        :placeholder="item.placeholder"
                        :is="`el-${item.type}`"
                        v-model="model[item.prop!]"
                    >
                        <component
                            v-for="(child, i) in item.children"
                            :key="i"
                            :label="child.label"
                            :value="child.value"
                            :is="`el-${child.type}`"
                        ></component>
                    </component>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { PropType, ref, onMounted, watch } from 'vue'
import { FormOptions } from './types/types'
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
let props = defineProps({
    options: {
        type: Array as PropType<FormOptions[]>,
        required: true,
    },
})
//局部引入，深拷贝
import cloneDeep from 'lodash/cloneDeep'

const model = ref<any>()
const rules = ref<any>()

const initForm = () => {
    let m: any = {}
    let r: any = {}
    props.options.map((item: FormOptions) => {
        m[item.prop!] = item.value
        r[item.prop!] = item.rules
    })
    model.value = cloneDeep(m)
    rules.value = cloneDeep(r)
    console.log('model', model.value)
    console.log('rules', rules.value)
}

onMounted(() => {
    if (props.options && props.options.length) {
        initForm()
    }
})
//监听父组件传递进来的options的变化
watch(
    () => props.options,
    val => {
        initForm()
    },
    { deep: true }
)

//****************** 上传组件的所有方法 ******************
let emits = defineEmits([
    'on-preview',
    'on-remove',
    'on-success',
    'on-error',
    'on-progress',
    'on-change',
    'before-remove',
    'before-upload',
    'http-request',
    'on-exceed',
])
//点击文件列表中已上传的文件时
const onPreview = (file: UploadFile) => {
    emits('on-preview', file)
}
//文件列表移除文件时
const onRemove = (file: UploadFile, fileList: UploadFile[]) => {
    emits('on-remove', { file, fileList })
}
//文件列表移除文件时
const onSuccess = (response: any, file: UploadFile, fileList: UploadFile[]) => {
    emits('on-success', { response, file, fileList })
}
// 文件上传失败时
const onError = (err: any, file: UploadFile, fileList: UploadFile[]) => {
    emits('on-error', { err, file, fileList })
}
// 文件上传时
const onProgress = (event: any, file: UploadFile, fileList: UploadFile[]) => {
    emits('on-progress', { event, file, fileList })
}
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const onChange = (file: UploadFile, fileList: UploadFile[]) => {
    emits('on-change', { file, fileList })
}
//上传文件之前
const beforeRemove = (file: UploadFile, fileList: UploadFile[]) => {
    emits('before-remove', { file, fileList })
}
//删除文件之前
const beforeUpload = (file: UploadFile) => {
    emits('before-upload', file)
}
// 覆盖默认的 xhr 行为，允许您实现自己的上传文件请求
const httpRequest = () => {
    emits('http-request')
}
// 文件超出个数限制时
const onExceed = (file: UploadFile, fileList: UploadFile[]) => {
    emits('on-exceed', { file, fileList })
}
</script>
<style lang="scss" scoped></style>

Answer 1

五月的夏天 2022-01-12 12:59:50

函数的参数类型不一致 。

• 提问者 淡定的飞脚 #1

  是的  ，但是官方文档说有参数，但是从代码点进去又是没参数，所以已知横线语法报错，但是编译不报错

• 五月的夏天 #2

  文件都是File和FileList的类型 。