springboot + vue+elementUI实现图片上传功能

 更新时间:2025年01月10日 10:58:01   作者:BestArsenaI  
文章描述了如何使用Element UI的el-upload组件实现前端图片上传,并将图片存储到后端数据库,同时在页面上回显上传的图片,后端通过接口接收图片,并将其存储在指定位置,然后返回图片路径以便在前端显示,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧

1.实现背景

前端上传一张图片,存到后端数据库,并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、

2.前端页面

<el-upload
   class="upload-demo"
   action="http://xxxx.xxx.xxx:9090/file/upload" 
   :show-file-list="false"
   multiple
   :limit="3"
   :on-success="handleAvatarSuccess1"
   >
   	 <img v-if="package1" :src="package1" class="avatar" alt="">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

点击上传后,将图片发送到action后面的接口,之后后端返回图片,回显到img标签。

3.接口实现

前提:SQL已有一张image表:

application.yml文件中配置图片存储的位置

files:
  upload:
    path: /www/nndemo/sb/ #这里是服务器的文件位置,如果是本地项目,改成某磁盘某文件夹即可

接口实现:

package com.tt.springboot.controller;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import com.tt.springboot.entity.Images;
import com.tt.springboot.mapper.FileMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
/**
 * @author TT
 * @date 2023-10-26 14:47:13
 * @description 文件上传下载接口
 * @parms file 前端传递过来的文件
 */
@RestController
@RequestMapping("/file")
public class FileController {
    @Autowired
    FileMapper fileMapper;
    @Value("${files.upload.path}")
    private String fileUploadPath; //图片最终存储的位置
    @PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename(); //原始名称
        String type = FileUtil.extName(originalFilename);//文件类型
        long size = file.getSize(); //大小
        //存储到磁盘
        File uploadParentFile = new File(fileUploadPath);
        if (!uploadParentFile.exists()){ //文件目录是否存在
            uploadParentFile.mkdirs();
        }
        //定义一个文件唯一标识码
        String uuid = IdUtil.fastSimpleUUID();
        String fileUuid = uuid + StrUtil.DOT + type;
        File uploadFile = new File(fileUploadPath + fileUuid);
        //把获取到的文件存储到磁盘中去
        file.transferTo(uploadFile);
        //存储到数据库
        String url = "http://xxxx.xxxx.xxx:9090/file/" + fileUuid;
        Images saveFiles = new Images();
        saveFiles.setName(originalFilename);
        saveFiles.setSize(size);
        saveFiles.setType(type);
        saveFiles.setUrl(url);
        fileMapper.saveFile(saveFiles); // 存入数据库,这里项目比较简单,没有三层架构
        return url;
    }
    @GetMapping("/{fileUUID}")
    public void download( HttpServletResponse response, @PathVariable String fileUUID) throws IOException {
        File uploadFile = new File(fileUploadPath + fileUUID);
        ServletOutputStream outputStream = response.getOutputStream();
        response.setHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode(fileUUID,"UTF-8"));
        response.setContentType("application/octet-stream");
        outputStream.write(FileUtil.readBytes(uploadFile));
        outputStream.flush();;
        outputStream.close();
    }
}

fillMapper实现:

@Mapper
public interface FileMapper {
    @Insert("insert into images(name,size,type,url) values (#{name},#{size},#{type},#{url})")
    void saveFile(Images files);
}

到此这篇关于springboot + vue+elementUI实现图片上传功能的文章就介绍到这了,更多相关springboot vue图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue基础之使用get、post、jsonp实现交互功能示例

    vue基础之使用get、post、jsonp实现交互功能示例

    这篇文章主要介绍了vue基础之使用get、post、jsonp实现交互功能,结合实例形式分析了vue.js中get、post及jsonp针对本地文件、网络接口实现交互功能相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

    解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

    这篇文章主要介绍了解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
    2020-08-08
  • Vue中的 ref,props,mixin属性

    Vue中的 ref,props,mixin属性

    这篇文章主要介绍了Vue中的ref,props,mixin属性,文章围绕主题ref,props,mixin展开详细内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-05-05
  • 在vue2中实现截图功能的基本步骤

    在vue2中实现截图功能的基本步骤

    在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下
    2023-10-10
  • Vue.js实现的表格增加删除demo示例

    Vue.js实现的表格增加删除demo示例

    这篇文章主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • Vue组件之间传值/调用几种方式

    Vue组件之间传值/调用几种方式

    这篇文章主要介绍了Vue组件之间传值/调用的几种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • VUEX 使用 mutations的两种方式

    VUEX 使用 mutations的两种方式

    这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations,在mutations中定义一个方法,这个方法就是把点击的index(也就是每个列表的唯一标识),传给state中的当前标识,需要的朋友可以参考下
    2023-01-01
  • Vue.use()在new Vue() 之前使用的原因浅析

    Vue.use()在new Vue() 之前使用的原因浅析

    本文通过实例代码给大家介绍了为什么Vue.use()在new Vue() 之前使用,需要的朋友可以参考下
    2019-08-08
  • vue cli 3.0 搭建项目的图文教程

    vue cli 3.0 搭建项目的图文教程

    这篇文章主要介绍了vue cli 3.0 搭建项目的图文教程,本文通过图片文字相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 实例分析vue循环列表动态数据的处理方法

    实例分析vue循环列表动态数据的处理方法

    本篇文章给大家详细分享了关于vue循环列表动态数据的处理方法以及相关知识点内容,有需要的朋友们参考下。
    2018-09-09

最新评论