POST http://localhost:8081/product/uploadImage 400 () dispatchXhrRequest @ xhr.js?b50d:178 xhrAdapte

vue+spring boot - 注册界面关于头像上传问题

• 如果用饿了么的框架中的el-form 在form表单中加入上传图片的功能 即使用el-upload 如果不想在他的方法中进行上传，而是在点击注册时进行上传 他的上传办法
• <el-upload class="avatar-uploader" action="http://localhost:8081/product/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>

action中调用的就是上传的方法，去调用你的后台
如果这时候不想去直接完成上传的动作 则可以在后台中不完成上传操作 然后之后得到图片本身的东西

 handleAvatarSuccess(res, file) {
                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
                this.areyousure = file;
                console.log(this.areyousure)
            },

这个方法就是在完成够短之后调用 可以将你的图片得到，不过这时候得到的不是本体，如果想上传的话

let files = this.areyousure
                let file=new FormData();
                //file.push("file",files[0])
                file.append("file",files.raw)
                axios.post('http://localhost:8081/product/uploadImage',file).then(({data})=>{
                    this.ruleForm = data;

则需要在点击创建的时候调用方法 必要的一步是files.raw 必须写 这才是得到文件的本体 然后后台

@RequestMapping("/uploadImage")
    @ResponseBody
    public String uploadImage(@RequestParam MultipartFile file){
        String sqlPath = null;
        String localPath="F:\\vuezuo\\vuehelloworld\\public\\static\\picture\\";
        String filename=null;
        //System.out.println(file);
        if(!file.isEmpty()){
            //生成uuid作为文件名称
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            //获得文件类型（可以判断如果不是图片，禁止上传）
            String contentType=file.getContentType();
            //获得文件后缀名
            String suffixName=contentType.substring(contentType.indexOf("/")+1);
            //得到 文件名
            filename=uuid+"."+suffixName;
            //文件保存路径
            try {
                file.transferTo(new File(localPath+filename));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        sqlPath = localPath+filename;
        System.err.println(sqlPath);
        //System.out.println(sqlPath);
        // System.out.println(userService.findTouxiang(sqlPath).toString());
        return sqlPath;
    }

这个错误主要原因就是files.raw没有写 就会报错