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图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3中Excel导出的性能优化与实战指南

    Vue3中Excel导出的性能优化与实战指南

    这篇文章主要为大家详细介绍了使用Vue3如何实现Excel导出功能并进行优化的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2025-07-07
  • vue甘特图vxe-gantt实现点击任务条弹出编辑表单效果

    vue甘特图vxe-gantt实现点击任务条弹出编辑表单效果

    本文将介绍如何使用 vxe-gantt 组件实现点击任务条弹出编辑表单的功能,支持对任务的名称、时间、进度、负责人、图片附件等信息进行编辑,感兴趣的朋友跟随小编一起看看吧
    2026-03-03
  • 在vue中实现跨域方法小结

    在vue中实现跨域方法小结

    在Web开发中,跨域问题是一大挑战,跨域是指网络请求从一个域名发起,而请求的目标资源位于另一个不同的域名下,通常使用Vue CLI的代理来解决跨域问题,而在生产环境中,可以通过后端配置CORS或使用Nginx反向代理,或者通过服务器中转来解决跨域问题
    2023-10-10
  • Vue3+Vite使用双token实现无感刷新

    Vue3+Vite使用双token实现无感刷新

    本文主要介绍了Vue3+Vite使用双token实现无感刷新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue实现自定义表格工具扩展

    vue实现自定义表格工具扩展

    这篇文章主要为大家详细介绍了vue实现自定义表格工具扩展,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue中JSX的基本用法及高级部分

    Vue中JSX的基本用法及高级部分

    JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在 Javascript里面写XML,因为 JSX 的这个特性,所以他即具备了 Javascript的灵活性,同时又兼具html的语义化和直观性,这篇文章主要给大家介绍了关于Vue中JSX的基本用法及高级部分的相关资料,需要的朋友可以参考下
    2022-11-11
  • 详解vue-cli3多环境打包配置

    详解vue-cli3多环境打包配置

    这篇文章主要介绍了vue-cli3多环境打包配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue在路由中验证token是否存在的简单实现

    vue在路由中验证token是否存在的简单实现

    今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue如何用this.$set改变数组里的某个值

    Vue如何用this.$set改变数组里的某个值

    这篇文章主要介绍了Vue用this.$set改变数组里的某个值,文中通过示例代码介绍了vue中this.$set()的用法----更新数组和对象的值,需要的朋友可以参考下
    2022-12-12
  • vue如何修改data中数据问题

    vue如何修改data中数据问题

    这篇文章主要介绍了vue如何修改data中数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论