Vue中如何使用ElementUI实现图片上传
作者：奈何不吃鱼
这篇文章主要介绍了Vue中如何使用ElementUI实现图片上传,这里用了elementUI的一个简单的例子，给大家介绍的非常详细，需要的朋友可以参考下
一、前端代码实现
废话不多说直接上代码
<el-form-item prop="image" label="上传图片" v-model="form.image">
<el-upload
:action="'http://localhost:8080/files/upload'"
list-type="picture-card"
limit="1"
:on-exceed="limitError"
:on-success="imgSuccess"
:on-error="imgError"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>这里用了elementUI的一个简单的例子，自己又改了一些，简单讲解一下
action: 头像上传向后端发送的地址，这里后端采用了本地上传
list-type: 即文件列表的类型，就是上传后文件的样式是图片还是文字的格式
limit: 上传数量的限制，这里仅可上传一张图片
on-exceed: 上传超过限制触发的函数
on-success: 上传成功触发的函数
on-error: 上传失败触发的函数
更多参数可以参照：组件 | Element
相对应的函数如下：
// 上传成功
imgSuccess(res, file) {
this.imageUrl = res.data;
this.form.image = this.imageUrl;
console.log(res.data);
},
// 上传失败
imgError(res) {
this.$message({
type: "error",
message: "附件上传失败",
});
},
// 上传数量超限
limitError() {
this.$message({
type: "error",
message: "图片仅可上传一张",
});
},比较重要的是上传成功后的函数imgSuccess，此函数需要根据实际项目中你的form表单的值或者构建的data进行绑定操作，确保图片地址能被后端存储便于后续展示
二、后端代码实现
/**
* 文件上传
*/
@PostMapping("/upload")
public Result upload(MultipartFile file) {
if(file == null || file.isEmpty()) {
return Result.error(400,"上传文件为空");
}
String flag;
synchronized (FileController.class) {
flag = System.currentTimeMillis() + "";
ThreadUtil.sleep(1L);
}
String fileName = file.getOriginalFilename();
try {
if (!FileUtil.isDirectory(filePath)) {
FileUtil.mkdir(filePath);
}
// 文件存储形式：时间戳-文件名
FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);
System.out.println(fileName + "--上传成功");
System.out.println("文件上传地址"+filePath);
} catch (Exception e) {
System.err.println(fileName + "--文件上传失败");
return Result.error(400,"文件上传失败");
}
String http = "http://" + ip + ":" + port + "/files/";
return Result.success(http + flag + "-" + fileName);
}很普通的一个文件上传接口，仅接收一个文件流并进行本地存储后名称为：时间戳-文件名，
后端进行测试没有问题
三、调试效果实现
前端显示图片上传成功
到此这篇关于Vue中如何使用ElementUI实现图片上传的文章就介绍到这了,更多相关ElementUI图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！