Bootstrap file input(文件输入的用法)

1.前端

单击上传触发 upload_photo函数

<form @submit.prevent="upload_photo">
  <input id="fileInput" type="file" name="file" />
   <button type="submit">上传</button>
</form>

upload_photo函数

const upload_photo = () => {

            // 1.获得文件的input标签
            const fileInput = document.getElementById('fileInput');
 
            // 2.获得文件的对象
            const file = fileInput.files[0];
            console.log(file)
            if (!file) {
                error_message.value = "请选择一个文件";
                return;
            }

            // 3.将文件对象转化为可以传输的formData
            const formData = new FormData();
            formData.append('file', file);
            console.log(formData)
            // 4,传文件给后端
            $.ajax({
                url: "http://127.0.0.1:9090/user/account/upload",
                type: "post",
                data: formData,
                processData: false, // 必须禁用JQuery处理数据
                contentType: false, // 必须禁用JQuery设置content-type
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    console.log(resp);
                    error_message.value = "";
                    if (resp.error_message === "success") {
                        photo.value = resp.path;
                    } else {
                        error_message.value = resp.error_message;
                    }
                }, error() {
                    // console.log(resp);
                }
            });
        };

2.后端

controller

    @PostMapping("/user/account/upload")
    public Map<String,String> upload(@RequestParam("file") MultipartFile file){
        return updateService.uploadPhoto(file);
    }

service

 @Override
    public Map<String, String> uploadPhoto(MultipartFile file) {
        Map<String,String> resp = new HashMap<>();

        System.out.println("文件上传中!!!");
        if(file.isEmpty()){
            resp.put("error_message","上传图片不能为空!");
            return resp;
        }
        // 更改图片名防止重命名
        String originalFileName = file.getOriginalFilename();
        // .和，之后的部分
        String ext = "." + originalFileName.split("\\.")[1];  // 1.png 取 .png
        String uuid = UUID.randomUUID().toString().replace("-", "");

        // 新文件名 = 随机生成的前缀 + 原来的后缀
        String newFileName = uuid + ext;

        // 得到路径的前缀
        String pre = "E:\\java\\JavaProject\\Educational-Management-System\\backend\\src\\main\\resources\\static\\images\\";
        // 最后的路径 = 前缀 + 文件名
        String path = pre + newFileName;
        try {
            file.transferTo(new File(path));
        } catch (IOException e) {
            e.printStackTrace();
        }

        resp.put("path",path);
        return resp;
    }