近期使用了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' }); } },