近期使用了vue之el-upload组件,不小心踩过一个坑,在此记录。

故障现象:vue Error in callback for watcher "fileList"

故障原因:在回调函数中写错了组件名称m_3d。

正确代码如下。

                                <el-form-item label="" prop="m_3d">
                                    <template slot='label'>模块3D图片
                                    </template>
                                    <el-upload
                                        :file-list="form.m_3d"
                                        action="/ms-mcms/file/upload.do"                                  
                                        :on-remove="module3DhandleRemove"
                                        :style="{width:''}"
                                        :limit="1" 
                                        :on-exceed="moduleImghandleExceed"
                                        :disabled="false"
                                        :data="{uploadPath:'/1/cms/modules/','isRename':true}"
                                        :on-success="module3DSuccess"                                                               
                                        accept="image/*"
                                        list-type="picture-card">
                                        <i class="el-icon-plus"></i>
                                        <div slot="tip" class="el-upload__tip">最多上传1张图片</div>
                                    </el-upload>
                                </el-form-item>

                    //contentImg文件上传完成回调
        module3DSuccess: function (response, file, fileList) {
            this.form.m_3d.push({
                url: file.url,
                name: file.name,
                path: response,
                uid: file.uid
            });
        },
        module3DhandleRemove: function (file, files) {
                var index = -1;
                index = this.form.m_3d.findIndex(function (text) {
                    return text == file;
                });

                if (index != -1) {
                    this.form.m_3d.splice(index, 1);
                }
        },        
        //上传超过限制
        moduleImghandleExceed: function (files, fileList) {
            this.$notify({
                title: '当前最多上传1个文件',
                type: 'warning'
            });
        }
        },