Java文件上传

最新推荐文章于 2024-10-08 21:30:52 发布

Seven_77_

最新推荐文章于 2024-10-08 21:30:52 发布

阅读量106

点赞数

文章标签： java

本文链接：https://blog.csdn.net/Seven_77_/article/details/125704431

版权

Java图片上传（使用技术 element）

前言

使用element技术快速实现图片的上传

Element使用步骤

1.引入库

<link rel="stylesheet" href="css/eui.css">

<script src="js/vue.js"></script>
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>

2.前端

代码如下（示例）：

<body>
<h1>文件上传</h1>
<a href="/upload.html">文件上传</a>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <el-upload
            action="/upload"
            name="picFile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
<!--//el:"#app",-->
</div>
</body>
<script src="js/vue.js"></script>

<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:function () {
               return{
                   dialogImageUrl: '',
                   dialogVisible: false
               }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //当点击删除图片时方法会执行
                //file.response代表文件上传成功时 服务器响应的数据（文件名）
                console.log("文件名 = "+file.response)
                axios.get("/remove?name="+file.response).then(function (response) {
                    console.log("服务器图片已经删除");
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    })
</script>
</html>

控制器

package com.example.boot5.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
public class UploadController {
    @RequestMapping("/upload")
    // MultipartFile   专门接收上传文件的类型  上传的文件都保存在这个文件里边
    public String upload(MultipartFile picFile) throws IOException {
        System.out.println("picFile = " + picFile);
        //得到文件原始名 a.jpg
        String fileName = picFile.getOriginalFilename();
        //得到后缀 从最后一个 . 出现的位置截取到最后
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一文件名 UUID.randomUUID() 得到一个唯一标识符
        fileName = UUID.randomUUID()+suffix;

        System.out.println("唯一文件名 = " + fileName);
        //准备保存图片文件夹路径
        String dirPath = "D:/files1";
        File dirFile = new File(dirPath);
        //如果该文件夹不存在  则创建此文件夹
        if (!dirFile.exists()){
            dirFile.mkdir();//创建文件夹
        }
        //得到文件完整路径
        String filePath = dirPath+"/"+fileName;
        //把文件保存到此路径 抛出异常
        picFile.transferTo(new File(filePath));
        System.out.println("文件保存完成！请去此路径查看文件是否存在 "+filePath);


        //返回文件名 删除文件时用到
        return fileName;
    }
    @RequestMapping("/remove")
    public void remove(String name){
        String dirPath ="D:/files1";
        String filePath = dirPath+"/"+name;
        new File(filePath).delete();//删除文件
        System.out.println("完成删除的文件是 "+name);
    }
}