springboot在提交表单的时候同时提交图片等文件,并且在页面显示图片时访问物理磁盘上的图片.(tomcat映射虚拟路径给本地磁盘)

最新推荐文章于 2024-07-11 21:12:48 发布

好大的月亮

最新推荐文章于 2024-07-11 21:12:48 发布

阅读量1.2k

点赞数

分类专栏： springboot

本文链接：https://blog.csdn.net/weixin_43944305/article/details/105189817

版权

springboot 专栏收录该内容

111 篇文章 4 订阅

订阅专栏

在提交表单的时候同时提交图片等文件,这里以图片为例

表单大家都很熟悉了,这里提一下要注意的点
enctype="multipart/form-data"

<form role="form" method="post" action="/seller/product/save" enctype="multipart/form-data">
                                                <div class="form-group">
                                                        <label>名称</label><input type="text" class="form-control" value="${(productInfo.productName)!''}" name="productName" />
                                                </div>
                                                <div class="form-group">
                                                        <label>价格</label><input type="text" class="form-control" value="${(productInfo.productPrice)!''}" name="productPrice"/>
                                                </div>
                                                <div class="form-group">
                                                        <label>库存</label><input type="number" class="form-control" value="${(productInfo.productStock)!''}" name="productStock"/>
                                                </div>
                                                <div class="form-group">
                                                        <label>描述</label><input type="text" class="form-control" value="${(productInfo.productDescription)!''}" name="productDescription"/>
                                                </div>

                                                <div class="form-group">
                                                        <label>图片</label>
                                                        <br>
                                                        <#if productInfo?? && productInfo.productIcon??>
                                                                <img height="100" width="100" src="${(productInfo.productIcon)!''}" alt="图片加载失败"/>
                                                        </#if>
                                                        <input type="file" name="newProductIcon" />
                                                </div>
                                                <div class="form-group">
                                                        <label>商品类目</label>
                                                        <select name="categoryType" class="form-control">
                                                                <#list categoryList as category>
                                                                        <#if (productInfo.categoryType)?? && productInfo.getCategoryType() == category.getCategoryType()>
                                                                                <option value="${category.getCategoryType()}" selected="selected">${category.getCategoryName()}</option>
                                                                        <#else>
                                                                                <option value="${category.getCategoryType()}">${category.getCategoryName()}</option>
                                                                        </#if>

                                                                </#list>
                                                        </select>
                                                </div>
                                                <div class="form-group">
                                                        <label>商品状态</label>
                                                        <select class="form-control" name="productStatus">
                                                                <option value="0" selected="selected">上架</option>
                                                                <option value="1">下架</option>
                                                        </select>
                                                </div>
                                                <input hidden type="text" name="productId" value="${(productInfo.productId)!''}">

                                                <button type="submit" class="btn btn-default">提交</button>
                                        </form>

后端接收的时候
在这里插入图片描述

保存图片,这里要说一下MultipartFile这个类保存图片非常方便,transferTo(目标路径的File)

 @Override
    public String saveIcon(MultipartFile newIcon) {

        String UUIDPictureName = UUID.randomUUID().toString();
        String originalFileName = newIcon.getOriginalFilename();
        //后缀
        String ext = originalFileName.substring(originalFileName.lastIndexOf('.'));
        //保存的时候还是要保存到真实路径的,这里的这个路径有file前缀
        String fileName = UUIDPictureName + ext;
        String iconRealPath = iconPath.substring(iconPath.indexOf(':') + 1) + fileName;
        File icon = new File(iconRealPath);
        try {
            //存入目标路径
            newIcon.transferTo(icon);
        } catch (IOException e) {
            e.printStackTrace();
        }
        //在webConfi中映射了虚拟路径到项目中
        return "/icon/" + fileName;
    }

在页面显示图片时访问物理磁盘上的图片

这里要添加一个虚拟路径映射,路径我放在yml中了,方便后面修改
iconPath = file:D:/icon/
前面的这个file前缀很重要

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{

    @Value("${product.iconPath}")
    private String iconPath;


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/icon/**").addResourceLocations(iconPath);
    }
}