目录
一、前端代码实现
二、后端代码实现
三、调试效果实现
一、前端代码实现
废话不多说直接上代码
<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);}
很普通的一个文件上传接口,仅接收一个文件流并进行本地存储后名称为:时间戳-文件名,
后端进行测试没有问题
三、调试效果实现
前端显示图片上传成功