Vue实现图片传输到后端并回显

这里前端用的是Vue，组件用的是Element-UI。

1.前端

1.1 在Element-UI中找到上传组件

1.2实现前端页面如下所示

1.3 html代码

<template>
    <div>
        <div>
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :http-request="picUpload"
                    :on-success="handleSuccess"
                    multiple
                    :file-list="fileList"
                    :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                    上传到服务器
                </el-button>
            </el-upload>
        </div>
        <div>
            <h3>这是你上传的图片：</h3>
            <img v-if="imageUrl!==''" :src="this.hostURL+imageUrl" style="width: 400px; height: 300px; margin-top: 10px">
            <span v-else>暂未收到图片</span>
        </div>
    </div>
</template>

其中hostURL定义在main.js中，使用this调用。

//传输图片添加
Vue.prototype.hostURL = 'http://localhost:8081/static/'

1.4 js代码

我这里因为是测试，而且后端图片都是放在/resources/static下的，所以后端直接给返回了文件名。
后端返回结果如下：

{code: 200, message: '图片传输成功', obj: '2023-05-25-20-02.jpg'}

<script>
import axios from "axios";

export default {
    data() {
        return {
            fileList: [],
            imageUrl: ''
        }
    },
    methods: {
        handleSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        submitUpload() {
            this.$refs.upload.submit();
            this.fileList = [];
        },
        picUpload(f) {
            let params = new FormData()
            //注意在这里一个坑f.file
            params.append("file", f.file);
            axios({
                method: 'post',
                //这里的id是我要改变用户的ID值
                url: '/upload',
                data: params,
                headers: {
                    'content-type': 'multipart/form-data'
                }
            }).then(resp => {
                //这里返回的是头像的url
                console.log(resp);
                this.imageUrl = resp.obj;
            })
        }
    }
}
</script>

2.后端

2.1 定义Controller接收/upload请求

这里返回给前端的对象直接放入了新的文件名，后续会将图片名与路径写入数据库中，返回json格式的name与path对象。也可以考虑实现获取所有静态图片的功能，返回一个列表回去。

package com.xxxx.server.controller;

import com.xxxx.server.pojo.RespBean;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

/**
 * 传送图片
 *
 * @author HuangSJ
 */
@RestController
public class UploadController {
    @Value("${file.upload-path}")
    private String imgUrl;

    @ApiOperation(value = "返回前端发送来的图片")
    @PostMapping("/upload")
    public RespBean returnImg(@RequestBody MultipartFile file) {
        String originalFilename = file.getOriginalFilename();
        int index = originalFilename.indexOf(".");
        String formatFileName = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd-HH-mm")).toString();
        String newFileName = formatFileName + originalFilename.substring(index);
        try {
            //将文件保存指定目录
            file.transferTo(new File(imgUrl + newFileName));
            return RespBean.success("图片传输成功", newFileName);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return RespBean.error("图片传输出现了错误！");
    }
}

2.2 Application.yml

新增如下配置，根据个人文件路径修改即可。

file:
    upload-path: D:/Code/系统/yeb/yeb_back/yeb-server/src/main/resources/static/

2.3 WebConfig.java

保证前端能直接获取后端的静态文件，这里的filePath不定义变量或者定义局部变量都可以。这里主要功能是将包含/static/*的路径映射到本地的静态文件夹static下，保证图片的读取。

package com.xxxx.server.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 实现前端Vue :src 根据url显示头像图片，则必须设置WebMVC中的静态资源配置
 */

@Configuration
public class WebConfig implements WebMvcConfigurer {
    private String filePath = "D:/Code/系统/yeb/yeb_back/yeb-server/src/main/resources/static/";
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //将前者的路径映射到后者的static路径
        registry.addResourceHandler("/static/**").addResourceLocations("file:" + filePath);
        System.out.println("静态资源获取");
    }
}

2.4 拦截器问题

如果出现了后端测试功能正常，前端也接收到返回的值，但是获取图片时拿不到数据的情况，可以 考虑一下是不是被拦截了。我这里写了一个SecurityConfig文件，在这里放行一下就可以拿到图片了。

这个是别人那里看到的代码，大家可以根据情况自己修改代码。

package com.bomc.enterprise.config;
 
import com.bomc.enterprise.interceptor.LoginInterceptor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
 
    @Value("${server.servlet.context-path}")
    private String contextPath;
    //不注册这个在过滤器中 service将报空
    @Bean
    public LoginInterceptor loginInterceptor(){
        return new LoginInterceptor();
    }
 
    //添加拦截器方法
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //添加拦截路径
        String[] addPathPatters={
                "/**"
        };
        //添加不拦截路径
        String[] excludePathPatters={
                "/", "/login/login", "/login/loginPage","/login/register",
                "/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg",
                "/**/*.jpeg", "/**/*.gif", "/**/fonts/*", "/**/*.svg",
                "/**/*.ttf","/**/*.woff","/**/*.eot","/**/*.otf","/**/*.woff2"
        };
        //注册登录拦截器
        registry.addInterceptor(loginInterceptor()).addPathPatterns(addPathPatters).excludePathPatterns(excludePathPatters);
        //如果多条拦截器则增加多条
    }
 
    //添加放行静态资源
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
 
        //文件磁盘图片url 映射
        //配置server虚拟路径，handler为前台访问的目录，locations为files相对应的本地路径
        registry.addResourceHandler("/attachments/**").addResourceLocations("file:E:/东信svn项目/enterprise/code/attachments/");
        //配置静态文件路径，与上面并不冲突
        registry.addResourceHandler("/**").addResourceLocations("classpath:/META-INF/resources/");
    }
}

3.结果展示

参考文章

[1]:springboot踩坑三：配置静态资源访问与本地路径的映射
[2]:Springboot+vue 实现图片上传至数据库并显示