Spring + Element UI 实现拖拽文件上传

最新推荐文章于 2024-05-11 14:30:09 发布

泥瓶巷陈平安

最新推荐文章于 2024-05-11 14:30:09 发布

阅读量731

点赞数 1

文章标签： spring javascript ajax vue.js html

本文链接：https://blog.csdn.net/weixin_47009272/article/details/128227518

版权

前端代码

- 引入Element UI 和 ajax依赖

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--发送ajax-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

- html 页面引入文件上传组件
on-change 事件，文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,当用户添加文件后触发这个事件将文件上传到后端接口。

<div id="app">
    <el-container>
        <el-header>产品反馈</el-header>
        <el-main>

            <el-upload
                    class="upload-demo"
                    drag
                    action=""
                    multiple
                    :on-exceed="handleExceed"
                    :on-success="upSuccess"
                    :on-error="upError"
                    :on-change="uploadFile"
                    :file-list="fileList"
                    :limit="3"
            >
                <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>

        </el-main>
    </el-container>
</div>

在这里插入图片描述

- 发送文件到后端
避免on-change成功和失败多次调用，可以判断是否是文件发生变化触发的if (item.status !== ‘ready’) return;如果不是就return不执行发送文件操作，如果是文件发生变化则调用ajax请求给后端。
！！！注意前端发送文件给后端时需要将文件格式转成FormData才能发送
！！！发送请求时添加
headers: {
‘Content-Type’: ‘multipart/form-data’
}
告诉后端你发送的是FormData格式，后端可以进行接收。

    new Vue({
        el: '#app',
        data() {
            return {
                fileList: []
            };
        },
        methods: {
            // 上传成功
            uploadFile (item) {
                if (item.status !== 'ready') return;
                let formData = new FormData()   //将文件转为FormData格式
                let file = item.raw
                formData.append('file', file)
                axios({
                    url: 'http://localhost:8081/feedback/fileList', //后端提供的接口
                    method: 'post',
                    data: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
            },
            upSuccess(res) {
                this.$message({
                    type: 'success',
                    message: '上传成功',
                    showClose: true,
                    offset: 80,
                })
            },
            // 上传失败
            upError() {
                this.$message({
                    type: 'error',
                    message: '上传失败',
                    showClose: true,
                    offset: 80,
                });
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }
        },
    })

后端代码

- 控制层接收文件参数
使用MultipartFile接收文件，MultipartFile需要去spring-mvc.xml文件里进行配置（SpringBoot则不需要）接收文件后调用工具类对文件进行上传。A.BASE_PATH2 A.SERVER_PATH2 是接口中定义的两个常量，保存地址，于访问地址。
工具类返回文件保存路径，如果不为空则对json返回类设置值和信息。（也可根据自己的需要随意返回字符串或数字给前端做上传成功与否的判断条件即可）

package org.lanqiao.controller;

import org.lanqiao.common.utils.A;
import org.lanqiao.common.utils.JsonResult;
import org.lanqiao.common.utils.UploadUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;

@Controller
@RequestMapping(org.lanqiao.controller.FeedbackController.SOURCE)
public class FeedbackController{

    public static final String SOURCE = "feedback";

    /**
     * 文件上传
     * @param multipartFile
     * @return
     */
    @RequestMapping("fileList")
    @ResponseBody
    public JsonResult uploadImage(@RequestParam(value = "file") MultipartFile multipartFile){
        //调用工具类上传文件
        String FilePath = UploadUtils.upload(multipartFile, A.BASE_PATH2,A.SERVER_PATH2);
        JsonResult jsonResult = new JsonResult();
        if (FilePath != null){
            jsonResult.setCode(1);
            jsonResult.setMsg("上传成功");
        }else {
            jsonResult.setCode(0);
            jsonResult.setMsg("对不起，上传失败");
        }
        return jsonResult;
    }
}

！！！项目启动可用8081端口
！！！启动tomocat时可用8080端口避免冲突
在这里插入图片描述
双击手动启动tomocat

- 地址常量接口
BASE_PATH2 文件保存地址，在本地的tomcat，webapps文件夹中新建filelist文件夹对文件进行存放
SERVER_PATH2 保存到tomcat后对文件的访问地址，注意端口号的是否于启动的tomcat端口号一致

package org.lanqiao.common.utils;

public interface A {
    //文件存储路径
    static final String BASE_PATH2="D:\\software\\apache-tomcat-8.5.68\\webapps\\filelist";
    //文件访问路径
    static final String SERVER_PATH2="http://localhost:8080/filelist/";
}

- 工具类
获取文件名称后，再生成uuid字符串，拼接成一个新的文件名称（避免保存文件名称重复）
保存文件后，返回访问地址（如有需要也可将此地址保存到数据库中）

package org.lanqiao.common.utils;

import org.lanqiao.service.FeedbackService;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

/**
 * 文件上传工具类
 */

public class UploadUtils {


    public static String upload(MultipartFile file,String BASE_PATH2,String SERVER_PATH2){
        //获取文件的名称
        String filename = file.getOriginalFilename();
        //获取uuid（将生成的id - ,替换为空）
        String uuid = UUID.randomUUID().toString().replace("-", "");
        //将生成的uuid和文件名称进行拼接
        String newFilename = uuid +"-"+ filename;
        //创建文件实例对象
        File image = new File(BASE_PATH2, newFilename);
        //对这个文件进行上传操作
        try {
            file.transferTo(image);
        } catch (IOException e) {
            return null;
        }

        return SERVER_PATH2 + newFilename;
    }
}