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/up...
·
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没有写 就会报错
更多推荐
已为社区贡献3条内容
所有评论(0)