简简单单的图片上传

最新推荐文章于 2024-03-05 16:29:15 发布

Immortal_W

最新推荐文章于 2024-03-05 16:29:15 发布

阅读量445

点赞数

文章标签： ajax 图片上传

本文链接：https://blog.csdn.net/Immortal_W/article/details/85958332

版权

实现一个简简单单的图片上传

实现一个简简单单的图片上传需要以下几个java文件

1.WebAppConfig 代码如下：

@Configuration
public class WebAppConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/file/**").addResourceLocations("file:E:/mnt/project/file/");   //寻找图片的路径
        super.addResourceHandlers(registry);
    }
}

2.UtilController代码如下：

@RestController
@RequestMapping("/util")
public class UtilController {
    @PostMapping(value = "/saveImg")
    public ServerResponse saveImg(MultipartFile file){
        try {
           Accessory accessory = FileOperate.imageUpload(file,"E:/mnt/project/file/");
            return ServerResponse.success(accessory);
        } catch (IOException e) {
            e.printStackTrace();
            return ServerResponse.error(Const.NailCode.IMG_NO);
        }
    }
}

3.Accessory代码如下：


public class Accessory {
    private String accessoryId;

    private String accessoryOffical;

    private String accessoryAddress;

    private String accessoryName;

    public String getAccessoryId() {
        return accessoryId;
    }

    public void setAccessoryId(String accessoryId) {
        this.accessoryId = accessoryId;
    }

    public String getAccessoryOffical() {
        return accessoryOffical;
    }

    public void setAccessoryOffical(String accessoryOffical) {
        this.accessoryOffical = accessoryOffical == null ? null : accessoryOffical.trim();
    }

    public String getAccessoryAddress() {
        return accessoryAddress;
    }

    public void setAccessoryAddress(String accessoryAddress) {
        this.accessoryAddress = accessoryAddress == null ? null : accessoryAddress.trim();
    }

    public String getAccessoryName() {
        return accessoryName;
    }

    public void setAccessoryName(String accessoryName) {
        this.accessoryName = accessoryName == null ? null : accessoryName.trim();
    }
}

4.FileOperate代码如下：

public class FileOperate {
    /**
     * 图片上传
     * @param file 图片文件
     * @param parent 图片存储地址
     * @return 地址信息数组
     */
    public static Accessory imageUpload(MultipartFile file, String parent) throws IOException {
        Accessory accessory = new Accessory();
           String imgName;
//        List<String> imageList = new ArrayList<String>();
            String fileName = file.getOriginalFilename();//获取上传文件名
            String showFileName = fileName;
            System.out.println("文件名："+fileName);
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            String name = UUID.randomUUID().toString();
            fileName = name + suffixName;
            File targetFile = new File(parent, fileName);
            //创建文件夹
            if (!targetFile.getParentFile().exists()) {
                targetFile.getParentFile().mkdirs();
            }
            //将上传文件存储到服务器中
            file.transferTo(targetFile);
            //背景图片地址
            imgName = targetFile.getName();
            //将地址添加到集合中
            //imageList.add(url);
            System.out.println("图片名称为:" + imgName);
            accessory.setAccessoryName(showFileName);
            accessory.setAccessoryAddress(imgName);
        return accessory;
    }
}

最后主页的代码如下就可以试着上传了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>图片上传测试</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>

<body>
<!--FileOperate上传图片-->
<div style="left: 10%;top: 20%;position: fixed">
    <img src="images/partyBInformation/touxiang.png" style="width: 150px;height: 150px" id="photo"/>
    <div style="width: 200px;height: 200px">
        <a class="File">选择头像 <input type="file" id="photoInfo" onchange="changefile()"/></a>
        <span id="photoButton"></span>
        <button id="photoUploadBtn" style="display: none" onclick="topimgfile()">上传图片</button>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    var httpurl = "http://localhost:8080";
    var layer;               //声明layer
    layui.use('layer', function () {
        layer = layui.layer;
    });
    //上传头像
    function changefile() {
        var fileObj = document.getElementById("photoInfo").files[0]; // js 获取文件对象
        console.log(fileObj);
        var r = new FileReader();
        r.readAsDataURL(fileObj);
        r.onload = function (e) {
            document.getElementById('photo').src = this.result;
        };
        $("#photoUploadBtn").show();
    }

    function topimgfile() {
        var fileObj = document.getElementById("photoInfo").files[0]; // js 获取文件对象
        var formFile = new FormData();
        formFile.append("file", fileObj); //加入文件对象

        $.ajax({
            url: httpurl + "/util/saveImg",
            data: formFile,
            type: "Post",
            dataType: "json",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (ret) {
                debugger;
                console.log(ret)
                if(ret.code=="10000") {
                    layer.tips("上传成功！",'#photo',{tips: [2, '#ff0000'], time: 1000});
                }
            }
        })
    }
</script>
</body>
</html>

Immortal_W

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简简单单的图片上传

实现一个简简单单的图片上传实现一个简简单单的图片上传需要以下几个java文件1.WebAppConfig 代码如下：@Configurationpublic class WebAppConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandl...
复制链接

扫一扫