element前端圖片上傳以及後端儲存
阿新 • • 發佈:2020-12-15
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’;
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); }
最後儲存表中內容。