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);
}
最后保存表中内容。
更多推荐
element前端图片上传以及后端保存
发布评论