Vue.js/ElementUI-el-upload 与Spring Boot实现文件上传

话不多说-直接上代码-亲测好用

文件上传

Vue中代码

<!--        修改头像
            action:上传头像的地址
            name:上传头像的名称
            limit：设置上传头像的数量
            on-remove	文件列表移除文件时的钩子
            on-preview	点击文件列表中已上传的文件时的钩子
-->
            <el-upload
                class="upload-demo"
                name="file"
                action="http://localhost:9080/upload"
                :on-success="success"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList">
            <el-button size="small" type="primary">修改头像</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
 methods: {
    //头像上传 B
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 头像上传成功的钩子
    success(response, file, fileLis){
      this.url=response;
      console.log(response)
    }
  // 头像上传 End
  },

@RequestMapping("/upload")
    public String update(MultipartFile file) throws IOException {
        //file 代表客户端上传的文件参数
        System.out.println("上传文件成功"+file);
        String filename = file.getOriginalFilename();
        System.out.println("原始文件名"+filename);
        //        得到原始文件名的后缀
        String substring = filename.substring(filename.lastIndexOf("."));
        filename = UUID.randomUUID()+substring;
        System.out.println(filename);
        //准备保存文件的路径
        String filePath = "d:/image";
        File dirfile = new File(filePath);
        if (!dirfile.exists()){
            dirfile.mkdirs();//创建文件夹
        }
        //得到完整路径 ../avatar/xxx.jpg
        String filePathto = dirfile + "/" + filename;
        //把图片保存到上面的路径中 异常抛出
        file.transferTo(new File(filePathto));
        String result="http://localhost:9080/"+filename;
        System.out.println(result);
        return result;

    }

#  配置静态资源文件夹classpath:static 指的是原来的Static文件夹
spring:
  web:
    resources:
      static-locations: file:d:/image

有问题评论区留言…