SpringBoot+ajax+formData实现图片上传和回显

2021-05-01 13:29

阅读:607

标签:led   替换   indexof   str   res   ext   alert   dex   load   

前端Html

h2>图片上传h2>
img src="" id="preview_photo" width="200px" height="200px">
a href="javascript:void(0)" id="photo_upload" onclick="upLoadPhoto()">select photoa>
input type="file" id="upload" style="display: none" onchange="upload()">

注意 img标签的src是未赋值的

js代码

这里推荐了解一下ajax的各个参数用处:

https://www.cnblogs.com/wuchenfei/p/9820958.html(借用大佬的博客)

后端这里没有使用service,直接在controller中进行的fileName拼装和返回

package com.zdj.controller;

import com.zdj.utils.R;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
@RequestMapping("/picture")
public class PictureController {
    //图片的物理存储路径
    private static final String filePath = "D:/aaaaa/";
    //设置的tomcat静态虚拟路径
    private static final String vFilePath = "http://localhost:8888/pic/";
    @RequestMapping("/upload")
    public R upLoad(@RequestParam("file") MultipartFile file[]){
        //获取图片的名字
        String fileName = file[0].getOriginalFilename();
        //获取文件后缀名
        String suffix = getSuffix(fileName);
        //判断后缀名
        if(!suffix.equals("jpg") && !suffix.equals("png")){
            System.out.println("suffix error");
            return R.ok("0");
        }
        //返回map来获取图片的虚拟路径
        Map result = new HashMap();
        //date文件夹,方便管理
        String dateFile = new SimpleDateFormat("yyyyMMdd").format(new Date());
        String newfileName = filePath + dateFile;
        File newFile = new File(newfileName);
        //判断文件夹是否存在,不存在则创建
        if(!newFile.exists()){
            newFile.mkdirs();
        }
        //为文件添加uuid防止名字重复
        fileName = UUID.randomUUID().toString().replace("-","") + fileName;
        String newFilePath = newfileName + "/" + fileName;
        result.put("path",vFilePath + dateFile + "/" + fileName);
        try {
            file[0].transferTo(new File(newFilePath));
        } catch (IllegalStateException|IOException e) {
            e.printStackTrace();
        }
        return R.ok(result);
    }
    //封装获取后缀名方法
    public static String getSuffix(String fileName){
        int lastIndexOf = fileName.lastIndexOf(".");
        String suffix = fileName.substring(lastIndexOf + 1);
        return suffix;
    }
}

 

 当我写到这里的时候我发现我卡住了,原因是回显的时候无法直接从D盘中获取图片的路径。

所以我使用了tomcat的虚拟路径,在SpringBoot中添加config类

package com.zdj.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pic/**").addResourceLocations("file:D:/aaaaa/");
    }

}

 

同时这里的“D:/aaaaa/”直接被替换成了“http://localhost:8888/pic/”

前端获取的虚拟路径就可以直接赋给img标签的src来进行图片的回显

 

 问题

1.@RequestParam("file")的使用

 

 

SpringBoot+ajax+formData实现图片上传和回显

标签:led   替换   indexof   str   res   ext   alert   dex   load   

原文地址:https://www.cnblogs.com/frank9571/p/13207306.html


评论


亲,登录后才可以留言!