Ajax上传文件,后端返回文件访问路径

前端Ajax上传文件并发送请求

js

 //上传图片
    function uplodeFile() {
        var file=$('#Agreement_file')[0].files[0];
        console.log(file);
        var form = new FormData();
        form.append('img',file);
        $.ajax({
            type: 'POST',
            url: '/hotel/uplodeImg',
            data: form,
            processData: false, //告诉jquery要传输data对象
            contentType: false,   //告诉jquery不需要增加请求头对于contentType的设置
            success: function (data) {
            console.log(data);
            var imageURL=data.data;
            $('#pImg').attr('src',imageURL);
        }
    })
    }
    // 选择文件
    $(document).ready(function(data){
        $("#btn_choose_file").click(function(){
            $("#Agreement_file").trigger("click");
        });
    });

jsp

<div class="box-tools text-center">
  <img id="pImg" class="uplodeimg" src="" height="180px">
  <input id="Agreement_file" type="file" style="display:none" onchange="uplodeFile();" />
  <button id="btn_choose_file" type="button" class="btn bg-uplode">点击上传</button>
</div>

后端SpringBoot文件静态映射,存储并返回文件路径

controller

@RequestMapping("/uplodeImg")
    public Object uplodeImg(MultipartFile img){
        String uplodeImg = iHotelService.uplodeImg(img);
        return Result.init(200, "success", uplodeImg);
    }

service

    @Value("${file.rootPath}")
    String ROOT_PATH;
    //图片存放根目录下的子目录
    @Value("${file.sonPath}")
    String SON_PATH;
    //访问域名
    @Value("${file.localPath}")
    String localPath;

 @Override
    public String uplodeImg(MultipartFile file) {
        if (file.isEmpty()) {
            throw new NullPointerException("文件为空");
        }
        // 设置文件上传后的路径
        String filePath = ROOT_PATH + SON_PATH;
        // 获取文件名后缀名
        String suffix = file.getOriginalFilename();
        String prefix = suffix.substring(suffix.lastIndexOf(".")+1);
        //为防止文件重名被覆盖,文件名取名为:当前日期 + 1-1000内随机数
        String fileName = UUID.randomUUID()+ "." +  prefix;
        //创建文件路径
        System.out.println("fileName: "+fileName);
        File dest = new File(filePath + fileName);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            //假如文件不存在即重新创建新的文件已防止异常发生
            dest.getParentFile().mkdirs();
        }
        try {
            //transferTo(dest)方法将上传文件写到服务器上指定的文件
            file.transferTo(dest);
            //生成静态文件访问路径
            String filePathNew = localPath + fileName;
            System.out.println(filePathNew);
            return filePathNew;
        } catch (Exception e) {
            return dest.toString();
        }
    }

application.yml

file:
  rootPath: "E:"
  sonPath: "/takeout/img/"
  localPath: "http://localhost:8080/file/img/

配置静态文件映射

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        String path = "E:\\takeout\\";//映射的本地路径
        registry.addResourceHandler("/file/**").addResourceLocations("file:" + path);

        }
    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值