SpringBoot-上传文件(简单Deno实现)

一.后端(基于SpringBoot开发)

1.编写application.yml文件

spring:
  resources:
  #指定templates文件 映射 文件夹D盘目录下的data文件夹（映射路径注意不要写错了）
    static-locations: classpath:/templates,file:D:/data/

2.编写一个实现类

import com.hnucm.springboot.pojo.Result;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;

@RestController
@CrossOrigin
public class FileController {
     

    //设置文件路径
    private String uploadPath = "d:/Data/";

    @RequestMapping(value = "/fileupload")
    public Result fileupload(MultipartFile file, HttpServletRequest request) throws Exception, IOException {
     
        File folder = new File(uploadPath);
        if (!folder.isDirectory()) {
     
            folder.mkdirs();
        }
        // 对上传的文件重命名，避免文件重名
        String oldName = file.getOriginalFilename();
        String newName = UUID.randomUUID().toString()
                + oldName.substring(oldName.lastIndexOf("."), oldName.length());
        try {
     
            // 文件保存
            file.transferTo(new File(folder, newName));
            // 返回上传文件的访问路径
            String filePath = request.getScheme() + "://" + request.getServerName()
                    + ":" + request.getServerPort() + "" + request.getContextPath() + "/" + newName;
            //输出你上传后的图片映射路径地址， 这表示你上传的图片是否可以查看
            System.out.println("filePath:"+filePath);
            return Result.ok().put("data", filePath);
        } catch (IOException e) {
     
            Result.error(e.getMessage());
        }
        return Result.error();
    }
}

二.前端(基于Vue开发)

记住要ElementUI的依赖，关掉语法报错提示。

main.js文件

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
     
  render: h => h(App)
}).$mount('#app')

2.App.Vue文件

三.结果为

1.上传文件之前

2.上传文件之后