【Vue】三、使用ElementUI实现图片上传 |
您所在的位置：网站首页 › csgo怎么上传照片 › 【Vue】三、使用ElementUI实现图片上传 |
【Vue】三、使用ElementUI实现图片上传
|
目录 一、前端代码实现 二、后端代码实现 三、调试效果实现 一、前端代码实现废话不多说直接上代码 这里用了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); }很普通的一个文件上传接口，仅接收一个文件流并进行本地存储后名称为：时间戳-文件名， 后端进行测试没有问题
前端显示图片上传成功 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |