【Vue】三、使用ElementUI实现图片上传

目录

一、前端代码实现

二、后端代码实现

三、调试效果实现


一、前端代码实现

废话不多说直接上代码

html 复制代码
<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

相对应的函数如下:

javascript 复制代码
    // 上传成功
    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进行绑定操作,确保图片地址能被后端存储便于后续展示

二、后端代码实现

java 复制代码
/**
     * 文件上传
     */
    @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);
    }

很普通的一个文件上传接口,仅接收一个文件流并进行本地存储后名称为:时间戳-文件名,

后端进行测试没有问题

三、调试效果实现

前端显示图片上传成功

相关推荐
Han.miracle1 小时前
数据结构——二叉树的从前序与中序遍历序列构造二叉树
java·数据结构·学习·算法·leetcode
Le1Yu2 小时前
分布式事务以及Seata(XA、AT模式)
java
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
寒山李白3 小时前
关于Java项目构建/配置工具方式(Gradle-Groovy、Gradle-Kotlin、Maven)的区别于选择
java·kotlin·gradle·maven
无妄无望3 小时前
docker学习(4)容器的生命周期与资源控制
java·学习·docker
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
夜白宋5 小时前
【word多文档docx合并】
java·word
@yanyu6665 小时前
idea中配置tomcat
java·mysql·tomcat
2501_916766545 小时前
【项目部署】JavaWeb、MavenJavaWeb项目部署至 Tomcat 的实现方式
java·tomcat