上传图片到本地Nginx服务器

最新推荐文章于 2024-07-04 09:30:00 发布

China_HaoZi

最新推荐文章于 2024-07-04 09:30:00 发布

阅读量1.1k

点赞数 1

分类专栏： nginx 文章标签： nginx

本文链接：https://blog.csdn.net/China_HaoZi/article/details/106744736

版权

nginx 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

controller层：

   @ResponseBody
    @RequestMapping("/fileUpload.do")
    public Map<String,Object> upload(MultipartFile img) throws Exception {
        // 保存图片到 nginx 指定的目录 C:\servers\nginx-1.16.1\files\imgs
        String fileName = System.currentTimeMillis()+img.getOriginalFilename();
        String dir = "H:\\Nginx\\nginx-1.16.1\\files\\imgs\\";
        File file = new File(dir, fileName);
        img.transferTo(file);

        //将图片访问路径保存到数据库   
        String path = "http://本机地址/imgs/" + fileName;
        ShopColor shopColor = new ShopColor();
        shopColor.setShopColorImg(fileName);
        Integer colorId = shopColorService.insertShopColorImg(shopColor);

        //将图片路径  和 图片存储在数据库的id 返回给前端
        Map<String , Object> map = new HashMap<>();
        map.put("code",0);
        map.put("colorId",colorId);
        map.put("imgAdd",path);
        map.put("imgName",fileName);
        return map;
    }

javascript

<form id="form1">
        <p>商品图片：<input type="file" id="img" name="img" onchange="uploadFile()" required/></p>
        <p><input type="button" value="提交" onclick="submitInfo()"/></p>
        <input type="hidden" id="colorId"/>
        <input type="hidden" id="shopImg"/>
 </form>




   <script type="text/javascript">
        function uploadFile(){
            var formTag = document.getElementById("form1");
            var formData = new FormData(formTag);
            $.ajax({
                type:"POST",
                url:"fileUpload.do",
                data:formData,
                processData:false,
                contentType:false,
                success:function(res){
                    console.log(res);
                    $("#autoImg").attr("src",res.imgAdd);
                    $("#colorId").val(res.colorId);
                    $("#shopImg").val(res.fileName);
                    alert("添加成功！");
                },
                error:function () {
                    alert("网络不佳请稍后再试！");
                }
            });
        }
    </script>