奥利给给167 2023-03-13 08:56 采纳率: 100%
浏览 59
已结题

前台上传各种报错,无法读取前台的validate,烦死楼

后台用postman测试的时候时没有问题的

    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose"
        modal-append-to-body="false" :append-to-body="true">
        <el-form :model="loos" class="demo-form-inline" :ref="loos">
            <el-form-item label="遗失物品名称">
                <el-input v-model="loos.loosName" placeholder="遗失物品名称"></el-input>
            </el-form-item>
            
            <el-upload class="upload-demo" v-model="loos.loosName" ref="upload" action="" :auto-upload="false">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传图片文件,且不超过100kb</div>
            </el-upload>

            <el-form-item label="在哪找的">
                <el-input v-model="loos.loosAddress" placeholder="在哪找的"></el-input>
            </el-form-item>
            <el-form-item label="捡到时间">
                <el-date-picker v-model="loos.loosjDate" align="right" type="date" placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="被谁捡到的">
                <el-input v-model="loos.receiveName" placeholder="被谁捡到的"></el-input>
            </el-form-item>
            <el-form-item label="被捡到的人的电话">
                <el-input v-model="loos.receivePhone" placeholder="被捡到的人的电话"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">

            <el-button @click="handleClose" icon="el-icon-circle-close">取 消</el-button>

            <el-popconfirm title="确认提交吗?" @confirm="submitForm('upload')">
                <el-button slot="reference" type="success" size="big" icon="el-icon-thumb"
                    style="margin-left: 20px;">立即提交
                </el-button>
            </el-popconfirm>

        </span>
    </el-dialog>

上传方法

submitForm(loos) {
                console.log("-------------进入增加提交频道----------")
                            //表单数据的对象,存储表单数据
                            let formData = new FormData();
                            //调用表单验证
                            this.$refs[loos].validate((valid)=>{
                                if (valid) { //提交表单:axios发送请求
                                    //使用ref属性获取图片对象
                                    if (!this.$refs.upload._data.uploadFiles[0]) {
                                        alert("请选择图片")
                                    } else {
                                        //把图片追加到form对象中
                                        formData.append("upload", this.$refs.upload._data.uploadFiles[0].raw);
                                        formData.append("loosName", this.loos.loosName);
                                        formData.append("loosImages", this.loos.loosImages);
                                        formData.append("loosAddress", this.loos.loosAddress);
                                        formData.append("loosjDate", this.loos.loosjDate);
                                        //自己手动转换日期格式:"yyyy-MM-dd"
                                        // let date = this.loos.releaseDate;
                                        // let nian = date.getFullYear();
                                        // let yue = date.getMonth() + 1;
                                        // let ri = date.getDate();
                                        // formData.append("releaseDate", nian + "-" + yue + "-" + ri);
                                        
                                        formData.append("receiveName", this.loos.receiveName);
                                        formData.append("receivePhone", this.loos.receivePhone);
                                        formData.append("looslDate", this.loos.looslDate);
                                        formData.append("admin", this.loos.admin);
                                        //使用axios发送请求
                                        axios.post("/api/admin/loos/save", formData, {
                                                headers: {
                                                    "Content-Type": "mulitpart/form-data",
                                                }
                                            })
                                            .then((response) => {
                                                alert(response.data.msg)
                                                if (response.data.code === 200) {
                                                    //新增成功,页面跳转
                                                    this.$router.push("/admin/lostList")
                                                }
                                            }).catch((err) => {
                                                console.log(err)
                                            })
                                    }
            
                                } else {
                                    console.log('error submit!!');
                                    return false;
                                }
                            });

            }


后台代码

 @PostMapping("/save")
    public Object save(Loos loos,MultipartFile upload){

        Map<String,Object> map = new HashMap<>();
        //验证是否上传了文件
        if(upload.getSize()<=0){
            map.put("code",402);
            map.put("msg","请选择上传图片");
            return map;
        }
        String  fullName = upload.getOriginalFilename();//获取上传文件的全名称
        String suffixName = fullName.substring(fullName.lastIndexOf("."));//获取文件的后缀名
        //文件格式验证
        List<String> geshi = Arrays.asList(".jpg",".gif",".png",".png");
        if (!geshi.contains(suffixName)){
            map.put("code",402);
            map.put("msg","上传图片的格式不对");
            return map;
        }
        //文件大小的验证:小于100KB
        if (upload.getSize()>1024*100){
            map.put("code",402);
            map.put("msg","上传图片不能大于100KB");
            return map;
        }
        //获取文件的删除路径
        String rootPath = "D:/tupian";//存储文件的根路径
        String[] fileDirAndName = getFileDirAndName();//调取方法获取文件的名称和路径
        //判断文件存储路径是否存在,如果不存在,则创建
        File fullFile = new File(rootPath,fileDirAndName[0]);
        if (!fullFile.exists()){
            fullFile.mkdirs();//如果不存在,则创建文件夹
        }
        //文件的存储名称
        String fileName = fileDirAndName[1]+suffixName;
        //创建上传文件的输出的file对象:
        File outFile = new File(fullFile,fileName);
        try {
            //写出文件到磁盘
            upload.transferTo(outFile);
            //将文件的路径存储到数据库
            loos.setLoosImages(fileDirAndName[0]+"/"+fileDirAndName[1]+suffixName);
            //设置一些属性的默认值
            loos.setAdmin(0);//默认未领回
            //调用业务层新增的方法
            loosService.save(loos);
            map.put("code",200);
            map.put("msg","新增成功!");
        } catch (IOException e) {
            //如果发生异常,此处需要删除文件
            outFile.delete();
            e.printStackTrace();
            map.put("code",402);
            map.put("msg","新增失败,请稍后重试!");
        }
        return map;
    }


    //文件上传
    private String[] getFileDirAndName(){
        //创建日历类
        Calendar calendar = Calendar.getInstance();
        //获取年月日 时分秒
        int nian = calendar.get(Calendar.YEAR);
        int yue = calendar.get(Calendar.MONTH)+1;
        int ri = calendar.get(Calendar.DAY_OF_MONTH);
        //随机字符串
        String suiji = UUID.randomUUID().toString().split("-")[4];
        //文件路径
        String filePath = nian+"-"+(yue<10?"0"+yue:yue);
        //返回文件的名称
        String fileName = ""+nian+(yue<10?"0"+yue:yue)+(ri<10?"0"+ri:ri)+suiji;
        //返回文件路径和名称
        return new String[]{filePath,fileName};
    }


报错截屏

img

平台上的解决方法我也试过没有用,救命啊

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2023-03-13 09:10
    关注

    this.$refs["loos"].validate loos加个引号,不加的话 就是变量

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月21日
  • 已采纳回答 3月13日
  • 创建了问题 3月13日

悬赏问题

  • ¥15 我想通过python处理sybase IQ库的一些数据,但是不知道sybase IQ库怎么连接,之前连接都是用linux上的 dbisql
  • ¥15 安装llama-cpp-python==0.1.83失败
  • ¥20 管道轴向耦合水击问题
  • ¥60 补全networkx TODO部分。
  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题
  • ¥15 企业消防水炮塔设计方案