springboot+vue+token实现(表单+图片)上传图片地址保存到数据库。上传图片保存位置自己定义图片可以在前端回显)(代码片段)

author author     2022-12-06     503

关键词:

1、大致思路

以下是基于先处理图片、后端返回图片地址进行的

==存数据== 1、将图片信息提交到后端 2、后端处理 3、后端返回前端图片的访问地址 4、前端将图片地址存入要提交的表单中 5、将整个表单提交到后端、将数据存入数据库

==取数据== 1、前端获取后端返回的信息(包含图片的访问路径) 2、将访问图片的资源放到对应的标签或者组件中、按照自己的方式进行展示。(如果后端没有做图片资源的地址映射、会显示找不到对应的资源)

<hr>

2、将图片和表单数据保存的数据库

2.1 前端文件上传部分

只给出文件上传部分、其余的就是正常的表单

                    <el-form-item label="上传文件">
                      <input
                        @change="upload"
                        @click="clearFile"
                        multiple="multiple"
                        type="file"
                        ref="file"
                      />
                    </el-form-item>

这里可以选择使用上传多个文件、所以使用集合的形式。<为了后期扩展多文件上传、暂时保留、也可以选择 不适用集合形式。只上传一个文件>。这里使用==FormData==来传输、然后要在请求头中加上Content-Type: multipart/form-data 我这里对axios进行了二次封装、请求方式有所不同。你们按照自己的方式正常发送接口请求就可以。

    //文件上传
    upload: function () 
      let files = this.$refs.file.files;
      const _this = this;
      for (let i = 0; i < files.length; i++) 
        let formData = new FormData();
        formData.append("file", files[i]);
        this.$axios.uploadFile(formData).then((res) => 
          if (res.code == 200) 
            _this.$message("文件上传成功");
            console.log(res.data.fileName);
            this.GoodsInfoForm.fileName = res.data.fileName;
            console.log(this.GoodsInfoForm.fileName);
           else 
            _this.$message("error", res.data.msg);
          
        );
      
    ,

==友情提示:以下两个点可以忽略不看,对axios二次封装的一些小记录== 我这里进行了axios的二次封装、所以调用接口的方式有所不同。你们按照自己的配置正常发送接口请求就行

   /**
     * 文件上传
     */
    uploadFile: (params) => 
        return Post(http://localhost:8282/goodsInfo/upload, params);
    

这个也是进行的axios的二次封装、可以忽略。重要的一点是请求头中加上Content-Type: multipart/form-data

const instance = axios.create(
    baseURL: http://localhost:8282,
    timeout: 3000,
    headers: 
        post: 
            Content-Type: application/x-www-form-urlencoded;charset=UTF-8 ,
             Content-Type: multipart/form-data
        

    
)

2.2 后端处理文件的接口部分

2.2.1使用工具类操作

在pom文件中引入操作File的工具依赖。使用工具类操作还是很简洁方便的。

  <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.7</version>
        </dependency>
import cn.hutool.core.io.FileUtil;//需要引入这个、引入不对、无法使用对应的方法


/**
 * @author Lenovo
 * @version 1.0
 * @data 2022/10/11 21:32
 */
@RestController
public class GoodsfileInfoController 
    @Autowired
    GoodsFileInfoMapper gfMapper;

    private static final String ABSOLUTE_FILE_PATH = "E:\\\\Lenovo\\\\Documents\\\\upload\\\\images\\\\";

    /**
     * 文件上传 绝对
     * @param file
     * @return
     */
    @RequestMapping(value = "/goodsInfo/upload",method = RequestMethod.POST)
    public Result upload(MultipartFile file, HttpServletRequest request) throws IOException 
        String originName = file.getOriginalFilename();
        // 1、文件名加个时间戳
        String fileName = FileUtil.mainName(originName) + System.currentTimeMillis() + "." + FileUtil.extName(originName);
        // 2、文件存放的绝对路径 存放名称
        String storageName = ABSOLUTE_FILE_PATH + fileName;
        // 3. 文件上传
        FileUtil.writeBytes(file.getBytes(),storageName );
        String final_fileName ="http://localhost:8282/images/" + fileName;
        return Result.ok().data("fileName",final_fileName);

    



<hr>

2.2.2 一般的操作

2.2.1 和 2.2.2 可以自行选择使用、实现的效果是一样的

一般的文件写入操作、这个对文件名的处理还是使用的工具类。自己也可以根据自己的要求、自行处理文件名


/**
 * @author Lenovo
 * @version 1.0
 * @data 2022/10/11 21:32
 */
@RestController
public class GoodsfileInfoController 
    @Autowired
    GoodsFileInfoMapper gfMapper;


    private static final String ABSOLUTE_FILE_PATH = "E:\\\\Lenovo\\\\Documents\\\\upload\\\\images\\\\";

    /**
     * 文件上传 绝对
     * @param file
     * @return
     */
    @RequestMapping(value = "/goodsInfo/upload",method = RequestMethod.POST)
    public Result upload(MultipartFile file, HttpServletRequest request) throws IOException 
        System.out.println(System.getProperty("user.dir"));
        String originName = file.getOriginalFilename();
        // 1、文件名加个时间戳
        String fileName = FileUtil.mainName(originName) + System.currentTimeMillis() + "." + FileUtil.extName(originName);
        System.out.println(fileName);

        // 2、文件存放的绝对路径 存放名称
        String storageName = ABSOLUTE_FILE_PATH + fileName;

       // 3. 文件上传
        File dest = new File(storageName);
        if (!dest.getParentFile().exists()) 
            dest.getParentFile().mkdirs();
        
        try 
            file.transferTo(dest);
         catch (IOException e) 
            e.printStackTrace();
        

        String final_fileName ="http://localhost:8282/images/" + fileName;
        return Result.ok().data("fileName",final_fileName);


    


2.3 查看返回给前端的图片地址

2.4 前端保存后端返回的图片地址

2.5 查看存储到数据库中的图片资源地址

2.6 存到对应磁盘位置的图片

3、后端配置

3.1 图片资源映射

这里给出使用java代码的形式尽心资源映射、下一篇优化在配置文件中进行配置

/**
 * @author Lenovo
 * @version 1.0
 * @data 2022/10/12 18:58
 */
@Configuration
public class URLConfig implements WebMvcConfigurer 
    /**
     *  * 资源映射路径
     *  * addResourceHandler:访问映射路径
     *  * addResourceLocations:资源绝对路径
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) 
        registry.addResourceHandler("/images/**").addResourceLocations("file:"+"E:\\\\Lenovo\\\\Documents\\\\upload\\\\images\\\\");

    



3.2 如果设置了token、要放行图片资源。否则拦截

3.3 如果图片资源带有中文导致的图片资源访问不到、配置过滤器、设置编码格式

package com.zyz.bookshopmanage.config;
import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.net.URLDecoder;

/**
 * @author Lenovo
 * @version 1.0
 * @data 2022/10/12 23:04
 */
@Configuration
public class UrlFilter implements Filter 

    public final static String DEFAULT_URI_ENCODE = "UTF-8";

    private FilterConfig config = null;
    private String encode = null;

    @Override
    public void destroy() 
        config = null;
    

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
                         FilterChain chain) throws IOException, ServletException 
        HttpServletRequest request = (HttpServletRequest) req;
        String uri = request.getRequestURI();
        String ch = URLDecoder.decode(uri, encode);
        if(uri.equals(ch)) 
            chain.doFilter(req, res);
            return;
        
        ch = ch.substring(request.getContextPath().length());
        config.getServletContext().getRequestDispatcher(ch).forward(req, res);

    

    @Override
    public void init(FilterConfig config) throws ServletException 
        this.config = config;
        this.encode = config.getInitParameter("DEFAULT_URI_ENCODE");
        if(this.encode == null) 
            this.encode = DEFAULT_URI_ENCODE;
        
    


4、图片的回显

图片回显的方式和种类蛮多、我这边想要实现的效果、是点击按钮来展示对应的图片。你也可以直接将图片放到表格中

4.1 前端代码

        <el-table-column label="商品图片">
                    <template slot-scope="scopes">
                      <button
                        class="btn btn-primary btn-xs"
                        @click="showImage(scopes.$index, scopes.row)"
                      >
                        预览
                      </button>
                    </template>
                  </el-table-column>
    //文件显示
    showImage: function (index, row) 
      console.log(row.fileName);
      const myimgUrl = row.fileName;
      this.dialogVisibleImage = true;
      this.$nextTick(function () 
        //获取元素
        $("#view-img").empty();
        $("#view-img").append(
          $(
            `<img  src="$myimgUrl" style="width: 400px; margin-bottom: 5px" alt="">`
          )
        );
      );
    ,
            <el-dialog
                  title="文件预览"
                  :visible.sync="dialogVisibleImage"
                  width="30%"
                  :before-close="handleClose"
                >
                  <div
                    id="view-img"
                    class="modal-body"
                    style="text-align: center"
                  ></div>
                </el-dialog>

5、后语

成功达到效果后、感觉也不太难。就是一看就会、一试就废。难的是自己在解决过程中、遇到问题了,这个解决问题的过程是真的不好受呐、还是自己太菜了撒 挑战自我、学无止境。。。。。。

下一篇、优化以下代码,将图片存储到项目中的静态资源下。其实是和存放到本地没有啥差别。就是一个路径的问题。

springboot+vue+elementui实现后台管理系统模板

...2、封装要求3、引入mock 前提:(1)相关博文地址:SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y 查看详情

springboot+vue+activiti7新增流程节点控制表单编辑/隐藏属性

参考技术A1、拖拽表单新增绑定数据表、绑定数据字段(原来是自动创建数据表和数据字段),新增后可以关联之前的数据表进行操作。2、流程bpmnjs新增审批节点控制表单的属性,比如审批节点A可以编辑标题项、隐藏内容项,... 查看详情

springboot自定义注解实现token校验

原文链接: https://blog.csdn.net/qq_33556185/article/details/105420205https://blog.csdn.net/weixin_43877725/article/details/1075546381.定义Token的注解,需要Token 查看详情

springboot+vue+elementui实现表单上传图片同时数据库存储url(代码片段)

后端(springBoot)思路:1、实现图片上传接口,利用图片工具类将图片上传至服务器或者本地2、实现图片删除接口,利用图片工具类对已上传至服务器或者本地的图片删除3、实现数据库修改接口,修改数... 查看详情

springboot整合oauth2实现token认证

参考地址:https://www.jianshu.com/p/19059060036bsession和token的区别:session是空间换时间,而token是时间换空间。session占用空间,但是可以管理过期时间,token管理部了过期时间,但是不占用空间.sessionId失效问题和token内包含。session基于... 查看详情

springboot笔记--整合shiro实现前后台分离token鉴权

参考技术A 查看详情

5分钟springboot极速整合jwt生成token,一篇文章带你快速了解原理并使用(代码片段)

SpringBoot整合jwt登录功能的实现实现原理Session、Cookie、Token的使用状况实践测试生成Token给客户端pojoJwtUtilController解决跨域问题Vue验证客户端存储Tokenrouter.jsError.vueJwtUtil.javaUserController.java运行效果专业解读登录功能的实现登陆页面... 查看详情

springboot从入门到精通(三十四)如何集成jwt实现token验证

...逐渐被基于Token的身份验证模式取代。接下来介绍如何在SpringBoot项目中集成JWT实现Token验证。一、JWT入门1.什么是JWTJWT(Jsonwebtoken)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC7519)。它定义了一种紧凑的... 查看详情

springboot+vue+elementui+flowable+自定义表单

参考技术A源码springboot:https://gitee.com/zjm16/zjmzxfzhlspringcloud:https://gitee.com/zjm16/zjmzxfzhl-cloud演示环境http://118.190.100.3:8080/zjmzxfzhl/ 查看详情

springboot集成jwt实现token验证

原文:https://www.jianshu.com/p/e88d3f8151db JWT官网:https://jwt.io/JWT(Java版)的github地址:https://github.com/jwtk/jjwt什么是JWTJsonwebtoken(JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC7519).定义了一种简洁的,自包... 查看详情

springboot集成jwt实现token验证(代码片段)

JWT官网: https://jwt.io/JWT(Java版)的github地址:https://github.com/jwtk/jjwt什么是JWTJsonwebtoken(JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC7519).定义了一种简洁的,自包含的方法用于通信双方之间以JSON对... 查看详情

vue-cli怎么设置token

参考技术Avue项目token的实现设置1.vue项目里token的实现步骤1:用户登录时,前端调用后台提供的登录接口;2:后台验证用户名和密码,验证通过后给前端返回token;3:前端解析token后,将token存储在localStorage...2.代码实现 查看详情

基于springboot+mybatis的前后端分离实现在线办公系统(代码片段)

在线办公系统目录在线办公系统1.开发环境的搭建及项目介绍2.登录模块及配置框架搭建<1>Jwt工具类及对Token的处理1.1根据用户信息生成Token1.2根据Token生成用户名1.3判断Token是否有效1.4判断Token是否可以被刷新1.5刷新Token,... 查看详情

基于springboot+mybatis的前后端分离实现在线办公系统(代码片段)

在线办公系统目录在线办公系统1.开发环境的搭建及项目介绍2.登录模块及配置框架搭建<1>Jwt工具类及对Token的处理1.1根据用户信息生成Token1.2根据Token生成用户名1.3判断Token是否有效1.4判断Token是否可以被刷新1.5刷新Token,... 查看详情

springboot整合jwt和请求拦截,实现利用token做请求安全拦截校验,且实现阻止并发登录(代码片段)

目录一、导入依赖二、编写jwt工具类,实现生成token和解析token三、在登录请求中向redis中添加token信息1、先注入redis的接口类2、在登录方法中生成token并插入redis,有效期一天四、实现请求拦截器1、编写自定义的请求拦截... 查看详情

前后端分离项目(vue+springboot)集成pageoffice实现在线编辑office文件

...如:<scripttype="text/javascript"src="http://localhost:8081/samples-springboot-back/pageoffice.js"></script>在您要打开文件的Vue页面,通过超链接点击或者按钮点击触发调用POBrowser打开一个新的Vue页面。比如通过超链接打开了一个新的Word.vue... 查看详情

【springboot】shiro实现无状态登录

参考技术A使用Shiro实现有状态登录,即用户登录状态存储在服务器Session中,使用Shiro实现比较简单,我这里暂不进行讨论。在一些环境中,可能需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像Session... 查看详情

springboot+security+jwt实现token验证+多provider——登录系统(代码片段)

首先呢就是需求:1、账号、密码进行第一次登录,获得token,之后的每次请求都在请求头里加上这个token就不用带账号、密码或是session了。2、用户有两种类型,具体表现在数据库中存用户信息时是分开两张表进行存储的。为什... 查看详情