vue+elementUI <el-upload>上传图片坑!
直接上代码!<el-upload style="margin-left: 20px":headers="multipart/form-data"class="avatar-uploader"action="http://localhost:8080/drawing_bed/userImgUpload":show-file-li
·
直接上代码!
<el-upload style="margin-left: 20px"
:headers="multipart/form-data"
class="avatar-uploader"
action="http://localhost:8080/drawing_bed/XXX"
:show-file-list="false"
:accept="'image/*'"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
首先说一下,这个< el-upload >必须要有的东西
- headers必须要有在 < el-upload >这个标签里面,这个头是用来标注你文件传输的类型,我这边用到的是 form-data 这个类型
- action 这个必须要有即使你不用它,把它赋值为空也是可以的
- accept 属性用来限制文件格式
好,在来看这个标签里面的方法是怎么写的
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
// alert("sdjfaj")
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
后台代码,接口用来接收前端传过来的图片
@CrossOrigin//跨域设置 不设置前端会报端口没有设置跨域的错误
@PostMapping("/drawing_bed/userImgUpload")//用户上传头像使用的接口
public String userImgUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
uploadPath =”src/main/resources/image/“
// 使用时间来建立文件夹
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd/"); String format = simpleDateFormat.format(new Date());
File folder = new File(uploadPath + format);
if (!folder.isDirectory()) {
folder.mkdirs();
}
BASE64Encoder base64Encoder =new BASE64Encoder();
String base64=base64Encoder.encode(file.getBytes());
System.out.println("imgName "+file.getOriginalFilename());
// 获取文件名
String fileName = file.getOriginalFilename();
System.out.println("上传的文件名为:" + fileName);
// 对上传的文件重命名,避免文件重名 把图片的后缀拿出来,使用uuid进拼接
String newName = UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf("."),fileName.length());
BASE64Decoder decoder = new BASE64Decoder();
//Base64解码为图片
try {
byte[] b = decoder.decodeBuffer(base64);
b = decoder.decodeBuffer(base64);
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{
//调整异常数据z
b[i]+=256;
}
}
//新生成的图片 src/main/resources/image//+yyyy/MM/dd/+UUID.jpg/png
String imgFilePath =uploadPath+format+newName;//src/main/resources/image
System.out.println("imgFilePath:"+imgFilePath);
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
// 返回上传文件的访问路径
String filePath = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() +"/"+ format + newName;
System.out.println(filePath);
return filePath;
}
public String userImgUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request)
这上面这段代码,我在网上看到很多博客都没有标注,我这里解释说明一下。
@RequestParam(“file”) MultipartFile file 这里面的注解写的为什么是”file“?看下面的图片
我们可以看到,在action路径下的请求,有一个From Data 它默认的名字就叫”file“
我这边后台处理这个图片的思路是,把 MultipartFile 转换成base64,然后把base64转成二进制,在从二进制转换成图片写入文件中。
标题如果headers 报错,F12说不知道这个东西该怎么办
下面又是另外一种思路,下面这个思路是没有headers的解决方案
说不多说直接上代码
(记得改里面的action别拿起来就用)
<el-upload style="margin-left: 20px"
class="avatar-uploader"
action="http://106.53.120.132:8080/drawing_bed/drawing_bed/XXX"
:show-file-list="false"
:accept="'image/*'"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
好,我们的文件名字还是file,但是这里我们可以看到 它跟之前的有变化,它变成了二进制的格式传输,那MultipartFile 对二进制的支持还是非常友好的
上后台代码(我觉得这种方法还简单一点)
@CrossOrigin//跨域设置
@PostMapping("/drawing_bed/XXX")//所以接口分开写
public String userImgUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
//还是一样用日期做文件夹
//uploadPath :C:\Users\XXX\Desktop
String format = simpleDateFormat.format(new Date());
File folder = new File(uploadPath + format);
//如果没有该目录就创建一个
if (!folder.isDirectory()) {
folder.mkdirs();
}
System.out.println("imgName "+file.getOriginalFilename());
// 获取文件名:test.jpg
String fileName = file.getOriginalFilename();
System.out.println("上传的文件名为:" + fileName);
// 对上传的文件重命名,避免文件重名 把图片的后缀拿出来,使用uuid进拼接
String newName = UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf("."),fileName.length());
String imgFilePath =uploadPath+format+newName;
System.out.println("imgFilePath:"+imgFilePath);
//由于我们的这个传输文件的格式变成了二进制,我们就用MultipartFile 里面的方法直接写入图片就好了,这个也是后面才发现的,前面的代码大家可以当笑话看
file.transferTo(new File(imgFilePath));
// 返回上传文件的访问路径
String filePath = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort()+"/drawing_bed"+"/"+ format + newName;
System.out.println(filePath);
return filePath;
}
更多推荐
已为社区贡献1条内容
所有评论(0)