Springboot + Vue + elementUI 文件上传

Posted merfhey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Springboot + Vue + elementUI 文件上传相关的知识，希望对你有一定的参考价值。

Springboot ：

1、编写application.properties配置文件

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/       // 配置视图解析器前缀路径
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html                       // 配置视图解析器后缀
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5

#修改tomcat post提交时的文件大小限制
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=300MB        // 配置上传文件大小和请求文件最大
spring.servlet.multipart.max-request-size=215MB

#配置文件上传路径
File.UpliadFilePath=C:\UploadFiles\               // 服务器文件保存路径

2、配置文件对应的实体类，后面配置文件中的参数信息获取直接从该类属性而来
package com.tsht.suma.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Component
public class FileConfig {

    @Value("${File.UpliadFilePath}")
   public String UpliadFilePath;


    public String getUpliadFilePath() {
        return UpliadFilePath;
    }

    public void setUpliadFilePath(String upliadFilePath) {
        UpliadFilePath = upliadFilePath;
    }

}
// 为多文件上传
3、编写Controller
@Controller
public class UploadController {

@Autowired
FileConfig fileConfig;
@RequestMapping("/multiUpload")
@ResponseBody
public String  multiUpload(HttpServletRequest request,HttpServletResponse response){
    List<String> lists = new ArrayList<>();
    // 从配置文件中获取上传到服务器的路径
    String filePath = fileConfig.getUpliadFilePath();
    //System.out.println(filePath);
    MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
    MultiValueMap<String,MultipartFile> multiValueMap = multipartHttpServletRequest.getMultiFileMap();
    for(MultiValueMap.Entry<String,List<MultipartFile>> entry: multiValueMap.entrySet()){
        List<MultipartFile> multipartFiles = entry.getValue();
        for(MultipartFile multipartFile:multipartFiles){
            String filename = multipartFile.getOriginalFilename();
            try {
                multipartFile.transferTo(new File(filePath + filename));
                lists.add(filePath + filename);
                System.out.println("上传成功");
            }catch (IOException e){
                System.out.println(e.getMessage());
            }
        }
    }
    return "";
}

Vue + elementUI:

4、index.heml
引入下载在本地的样式文件和js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Springboot文件上传</title>
    <link rel="stylesheet" href="elementcssindex.css"/>
    <link rel="stylesheet" href="elementcsselement.css"/>
    <script type="text/javascript" src="vuevue.min.js"></script>
    <script type="text/javascript" src="elementjsindex.js"></script>
    <script type="text/javascript" src="elementjselement.js"></script>
</head>
<body>

<div id="app" v-cloak>
    <el-tabs :tab-position="tabPosition" class="tabs">
        <el-tab-pane label="文件上传">
            <el-container class="main">
                    <div class="upload">
                        <template>
                           <!-- 采用elementUI的文件上传组件，选择本地文件后自动上传，并显示上传进度和文件List -->
                            <el-upload class="upload-demo"
                                       ref="upload"
                                       name="uploadFile"
                                       action="/multiUpload"
                                       :multiple ="true"
                                       :on-preview="handlePreview"
                                       :on-remove="handleRemove"
                                       :on-change="handleChange"
                                       :file-list="fileList"
                                       :auto-upload="true"
                                       :show-file-list="true">
                                <el-button class="selectBtn" slot="trigger" size="small" round >选取本地文件</el-button>
                                <!--用自定义的文件夹上传按钮来代替自带的文件上传按钮-->
                                <el-button id="upload" style="margin-left: 10px;display: none" size="small" type="success" @click="submitUpload()">上传到服务器</el-button>
                                <div slot="tip" v-show="fileList.length>0" class="el-upload__tip">文件列表</div>
                            </el-upload>
                        </template>
                    </div>
            </el-container>
        </el-tab-pane>
</div>
</body>
<script>
    var Files = [];
    var vue = new Vue({
        el: ‘#app‘,
        data: {
            fileList: Files
        },
        methods:{
            indexMethod: indexMethod,
            selectFiles:selectFiles,
            submitUpload:submitUpload,
            handleRemove:handleRemove,
            handlePreview:handlePreview,
            handleChange:handleChange
        },
        created: function () {
            
        }
    });

    function handleChange(file, fileList) {
        Files = fileList;
    }

    //移除文件时
    function  handleRemove(file, fileList) {
        console.log(file, fileList);
    }
    //添加文件时
    function handlePreview(file) {
        console.log(file);
    }

    function submitUpload(){
        
    }
}
</script>

以上是关于Springboot + Vue + elementUI 文件上传的主要内容，如果未能解决你的问题，请参考以下文章

在vue中用了elemen插件,怎么让复选改为单选

vue+elemen把时间作为参数搜索数据注意一点

vue + elemen可远程搜索select选择器的封装（思路及源码分享）

10.17 elemen.js

基于Vue和elemen-ui做一个点击文字显示图片功能并封装成组件

在Vue+element 开发中报: The template root requires exactly one elemen 错的解决和原因