element前端图片上传以及后端保存

前端代码

<el-form-item label="上传证件照片" prop="image">
                    <el-upload
                            class="avatar-uploader el-upload-list--picture-card"
                            :class="{'disabled':disabled}"
                            :action="uploadAction"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                        <div v-if="form.image" class="avaar">
                            <img v-if="form.image" :src="homePath + form.image" class="avatar">
                            <span id="doshow1" class="el-upload-list__item-actions" v-if="!disabled">
           <i class="el-icon-delete" @click.stop="handleRemove()"></i>
           </span>
                        </div>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

方法 ：data: {
homePath: homePath,
uploadAction: window.homePath + ‘admin/sm/upload/fileUpload2’,
}
methods: {
handleRemove(file) {
this.form.image = “”
},
handleAvatarSuccess(res, file) {
/* this.imageUrl = URL.createObjectURL(file.raw);*/
this.form.image = res.data.filePath
},
beforeAvatarUpload(file) {
const iscontain = file.type === ‘image/jpeg’ || file.type == ‘image/png’ || file.type == ‘image/jpg’;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!iscontain) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 44: … }̲ …message.error(‘上传图片大小不能超过 2MB!’);
}
return iscontain && isLt2M;
}
},

后端代码

@RequestMapping(value = "/fileUpload2", method = RequestMethod.POST)
@ResponseBody
@JsonResultAnnotation
public JsonResult fileUpload2(MultipartHttpServletRequest request) throws Exception {
    Iterator<String> iterator = request.getFileNames();
    Uploadfiles result = new Uploadfiles();
    while (iterator.hasNext()) {
        String fileName = iterator.next();
        MultipartFile multipartFile = request.getFile(fileName);
        byte[] bfile = multipartFile.getBytes();

        /*String base64= "data:image/jpeg;base64,"+Base64.encodeBase64String(bfile);
        result= Common.uploadFile(base64);*/

        InputStream in = new ByteArrayInputStream(bfile);

        //获取跟目录
        File path = new File(request.getSession().getServletContext().getRealPath("/WEB-INF/classes"));
        if(!path.exists()) path = new File("");
        System.out.println("path:"+path.getAbsolutePath());

        //如果上传目录为/static/images/upload/，则可以如下获取：
        File upload = new File(path.getAbsolutePath(),"static/images/upload/");
        if(!upload.exists()) upload.mkdirs();
        System.out.println("upload url:"+upload.getAbsolutePath());
        String absolutePath = upload.getAbsolutePath();

        String realPath = request.getServletContext().getRealPath("/");
        String originalFilename = multipartFile.getOriginalFilename();

        int one = originalFilename.lastIndexOf(".");
        String substring1 = originalFilename.substring(0, one);
        String substring = originalFilename.substring(one, originalFilename.length());

        String file = absolutePath+"/"+substring1+"_"+ System.currentTimeMillis()+substring;
        file = file.replaceAll("\\\\", "/");


        FileOutputStream fos=new FileOutputStream(file);
        byte[] b = new byte[1024];
        int nRead = 0;
        while ((nRead = in.read(b)) != -1) {
            fos.write(b, 0, nRead);
        }
        fos.flush();
        fos.close();
        in.close();
        String[] statics = file.split("static");
        String s = statics[1];
        result.setFilePath(s.substring(1,s.length()));

        //缩略图
        Boolean pic= ThumbnailUtil.judgeFileType(file);
        if(pic){
            File file1=new File(file);
            long length=file1.length()/1024;
            if(length>10240){
                File thumbnail= ThumbnailUtil.createThumbnail(file,0.1,1);
                s = thumbnail.getPath().split("static")[1];
            }else if(length>1024){
                File thumbnail= ThumbnailUtil.createThumbnail(file,0.2,1);
                s = thumbnail.getPath().split("static")[1];
            }else if(length>300){
                File thumbnail= ThumbnailUtil.createThumbnail(file,0.5,1);
                s = thumbnail.getPath().split("static")[1];
            }
            result.setFilePathSmall(s.substring(1,s.length()));
        }


        result.setFileName(originalFilename);

    }
    return JsonHelper.toJson(result);
}

最后保存表中内容。