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文件

<template>
  <div id="app">
    <el-upload
            class="upload-demo"
            drag
            limit ="1"
            :on-success = handlesuccess
            action="http://localhost:8089/springboot/fileupload"
            multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <img :src="imgurl" />
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted() {

    },
    data(){
      return{
        imgurl:''
      }
    },
    methods: {
      handlesuccess(response, file, fileList){
        console.log("success")
        console.log(response)
        console.log(file)
        console.log(fileList)
        this.imgurl = response.data
      }
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

三.结果为

1.上传文件之前

2.上传文件之后