西宁网站建设学校,大型网络游戏,知更鸟wordpress设置注册,做网站建设科技公司目录
一、前端代码实现
二、后端代码实现
三、调试效果实现 一、前端代码实现 废话不多说直接上代码
el-form-item propimage label上传图片 v-modelform.imageel-upload:actionhttp://localhost:8…目录
一、前端代码实现
二、后端代码实现
三、调试效果实现 一、前端代码实现 废话不多说直接上代码
el-form-item propimage label上传图片 v-modelform.imageel-upload:actionhttp://localhost:8080/files/uploadlist-typepicture-cardlimit1:on-exceedlimitError:on-successimgSuccess:on-errorimgErrori classel-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);} 很普通的一个文件上传接口仅接收一个文件流并进行本地存储后名称为时间戳-文件名
后端进行测试没有问题 三、调试效果实现 前端显示图片上传成功
