qq_40619811 2022-07-13 21:43 采纳率: 89.8%
浏览 30
已结题

如何用Springboot生成文件选择器并上传本地图片

你好,我现在做的程序是如果点击提交按钮,就会把表单的数据上传数据。如果点击选择上传图片按钮,就会自动弹出文件选择框,选择完图片后,就上传图片到对应的文件夹。
但是问题是点击提交按钮,也就是第一个按钮,就没反应。点击上传图片按钮,就显示404错误,这是为什么。
我用的是Springboot+Mybatis+Thymeleaf+Redis框架。怎么办?我不会JavaScript,不会js,感觉js很难,学不会,就放弃了js。只会html+css,不会js,放弃js。
这是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        label
        {
            display: inline-block;
            width: 120px;
            text-align: justify;
            text-align-last: justify;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<form id="form"  th:object="${Cangpin}" method="post" enctype ="multipart/form-data">
    <label>序号</label>
    <input type="text" id="xuhao" name="序号" th:field="*{xuhao}"></input><br>
    <label>图片路径</label>
    <input type="text" id="path2" name="图片路径" th:field="*{path2}"></input><br>
    <label>系列</label>
    <input type="text" id="sys" name="系列" th:field="*{sys}"></input><br>
    <label>藏品名称</label>
    <input type="text" id="cangpinname" name="藏品名称" th:field="*{cangpinname}"></input><br>
    <label>原价</label>
    <input type="text" id="yuanjia" name="原价" th:field="*{yuanjia}"></input><br>
    <label>现价</label>
    <input type="text" id="xianjia" name="现价" th:field="*{xianjia}"></input><br>
    <label>数量</label>
    <input type="text" id="num" name="数量" th:field="*{num}"></input><br>
    <label>总数量</label>
    <input type="text" id="totalnum" name="总数量" th:field="*{totalnum}"></input><br>
    <label>图标路径</label>
    <input type="text" id="icon" name="图标路径" th:field="*{icon}"></input><br>
    <label>公司或个人</label>
    <input type="text" id="company" name="公司或个人" th:field="*{company}"></input><br>
    <label>类型</label>
    <input type="text" id="type2" name="类型" th:field="*{type2}"></input><br>
    <label>起始时间</label>
    <input type="text" id="began" name="起始时间" th:field="*{began}"></input><br>
    <input type="submit" id="sub" formaction="@{/insertcps}" formmethod="post"></input>
    <button type="submit" id="pic" formaction="@{/upload}" formmethod="post">上传图片</button>
</form>
</body>
</html>


这是Controller部分代码

@Controller
public class Controller1{
    @Resource
    Redis redis;
    @RequestMapping("/querycp")
    @ResponseBody
    public Model getCangpin(Model mp){
        mapper mapper2=getCangpinArr.getCangpinMap();
        ArrayList<Cangpin> cp=new ArrayList<Cangpin>();
        cp=mapper2.Cangpin();
        return mp;
    }

    @CrossOrigin
    @RequestMapping(value = "/insertcps")
    @Cacheable(cacheNames = "Cangpins",key = "#cp.xuhao")
    @ResponseBody
    public ArrayList<Cangpin> lock(Cangpin cp){
        redis.delAll();
        ArrayList<Cangpin> cps=new ArrayList<Cangpin>();
        mapper mapper2 = getCangpinArr.getCangpinMap();
        cps=mapper2.Cangpin();
        cps.add(cp);
        mapper2.addCangpin(cp);
        return cps;
    }

    @RequestMapping("/insertcp")
    @ResponseBody
        public Model insert(Model mp){
           mp.addAttribute("Cangpin",new Cangpin());
           return mp;
        }

    @RequestMapping("/upload")
    public @ResponseBody String upload(@RequestParam MultipartFile file, HttpServletRequest request,String uploadPath){
        String a=FileChoosen.upload(file, request, "D:\\puks");
        System.out.println(a);
        return a;
    }


这是上传文件部分的代码

public class FileChoosen {
    public static String upload(MultipartFile file, HttpServletRequest request, String uploadPath){
        if(!file.isEmpty()){
            // 如果目录不存在则创建
            File uploadDir = new File(uploadPath);
            if (!uploadDir.exists()) {
                uploadDir.mkdir();
            }
            String OriginalFilename = file.getOriginalFilename();//获取原文件名
            String suffixName = OriginalFilename.substring(OriginalFilename.lastIndexOf("."));//获取文件后缀名
            //重新随机生成名字
            String filename = UUID.randomUUID().toString() +suffixName;
            File localFile = new File(uploadPath+"\\"+filename);
            try {
                file.transferTo(localFile); //把上传的文件保存至本地
                return filename;//上传成功,返回保存的文件地址
            }catch (IOException e){
                e.printStackTrace();
                System.out.println("上传失败");
                return "";
            }
        }else{
            System.out.println("文件为空");
            return "";
        }
    }
}

其他部分的代码我试过,都是正确的,没有问题,这里就不打出来了。
我的思路是用文件选择器选择图片,然后将图片保存在项目的static目录下的某一目录,数据库存的是该文件在static目录下的位置。
怎么实现。感觉这很难。尤其是我不会JS,JavaScipt,感觉没法做。

  • 写回答

2条回答 默认 最新

  • 江湖是人情世故 2022-07-14 09:45
    关注

    这个要使用js请求到后端接口上传至服务器的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月5日
  • 已采纳回答 7月28日
  • 创建了问题 7月13日

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置