vue+springboot实现文件上传和下载_el-upload上传springboot

作者：繁依Fanyi0 | 2024-04-08 08:14:53

踩

el-upload上传springboot

主要参考源码是

efo
file_upload

上传

选择文件
可以在线预览
上传文件

这里实现1,3两步的主要代码是：

看element里面的手动上传操作
关键点在：

ref=“upload”
:auto-upload=“false”>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>这里的slot设置
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>这里的@click设置
submitUpload() { this.$refs.upload.submit(); },这里的触发具体内容

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

现在关键问题在于如何实现未上传之前的预览

主要参考以下代码：
vue中upload选取了本地文件后预览的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--现在只有这个可以执行-->
<!--action是上传的地址-->
<div id="app">
<!--    accept=".pdf"-->
    <el-upload
            action="upload"
            :on-preview="handlePreview"
            :limit="10"
            ref="upload"
            :auto-upload="false">
        <el-button size="small" slot="trigger" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
</div>

</body>

<!--import Vue before Element-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--import Element js-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        methods: {
            handlePreview(file) {
                let reader = new FileReader()
                reader.readAsDataURL(file.raw);
                reader.onload = ()=>{
                    console.log(reader.result);
                };

                let URL = window.URL || window.webkitURL;
                this.linkDownload(URL.createObjectURL(file.raw));
                // window.open(file.response.url);
            },

            linkDownload(url) {
                window.open(url, '_blank');
            },

            submitUpload() {
                this.$refs.upload.submit();
            },
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

上传文件并将基本信息保存在数据库，类似这里

具体的实现是在 efo 这个项目上（已经下载了，可以打开idea查看）

现在那个用来尝试文件上传和下载的项目（idea中的file_upload）卡在了mybatis-generator的使用上面

简述mybatis-generator的使用（感觉没有mybatis-plus-generator来的方便）：

pom引入：

plugins里面加入：

<plugin>
    <groupId>org.mybatis.generator</groupId>
     <artifactId>mybatis-generator-maven-plugin</artifactId>
     <version>1.3.7</version>
     <dependencies>
         <dependency>
             <groupId>mysql</groupId>
             <artifactId>mysql-connector-java</artifactId>
             <version>8.0.15</version>
         </dependency>
     </dependencies>
     <configuration>
         <overwrite>true</overwrite>
     </configuration>
 </plugin>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置generator.properties

这个要根据自己的项目相应改变

jdbc.driverClass=com.mysql.cj.jdbc.Driver
jdbc.connectionURL=jdbc:mysql://localhost:3306/filetest?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false
jdbc.userId=root
jdbc.password=123456
1
2
3
4

配置generatorConfig.xml(最重要的一步）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <properties resource="generator.properties"/>
    <context id="MySqlContext" targetRuntime="MyBatis3" defaultModelType="flat">
        <property name="beginningDelimiter" value="`"/>
        <property name="endingDelimiter" value="`"/>
        <property name="javaFileEncoding" value="UTF-8"/>
        <!-- 为模型生成序列化方法-->
        <plugin type="org.mybatis.generator.plugins.SerializablePlugin"/>
        <!-- 为生成的Java模型创建一个toString方法 -->
        <plugin type="org.mybatis.generator.plugins.ToStringPlugin"/>
        <!--生成mapper.xml时覆盖原文件-->
        <plugin type="org.mybatis.generator.plugins.UnmergeableXmlMappersPlugin"/>
        <!--可以自定义生成model的代码注释-->
        <!--com.macro.mall.tiny.mbg.CommentGenerator-->
        <!-- 是否去除自动生成的注释 true：是 ： false:否 -->
<!--        <commentGenerator type="com.example.file_upload.mbg.CommentGenerator">-->
<!--            <property name="suppressAllComments" value="true"/>-->
<!--            <property name="suppressDate" value="true"/>-->
<!--            <property name="addRemarkComments" value="true"/>-->
<!--        </commentGenerator>-->
        <!--配置数据库连接-->
        <jdbcConnection driverClass="${jdbc.driverClass}"
                        connectionURL="${jdbc.connectionURL}"
                        userId="${jdbc.userId}"
                        password="${jdbc.password}">
            <!--解决mysql驱动升级到8.0后不生成指定数据库代码的问题-->
            <property name="nullCatalogMeansCurrent" value="true"/>
        </jdbcConnection>
        <!--指定生成model的路径-->
        <javaModelGenerator targetPackage="com.example.file_upload.entity" targetProject=".\src\main\java"/>
        <!--指定生成mapper.xml的路径-->
        <sqlMapGenerator targetPackage="com.example.file_upload.mapper" targetProject=".\src\main\resources"/>
        <!--指定生成mapper接口的的路径-->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.example.file_upload.mapper"
                             targetProject=".\src\main\java"/>
        <!--生成全部表tableName设为%-->
        <!--        <table tableName="pms_brand">-->
        <!--            <generatedKey column="id" sqlStatement="MySql" identity="true"/>-->
        <!--        </table>-->
        <!--        <table tableName="表名" domainObjectName="生成实体的类名">-->
        <!--        </table>-->
        <table tableName="user"></table>
        <table tableName="file"></table>
    </context>
</generatorConfiguration>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

运行
双击即可

解决办法：
IDEA+Mybatis-generator代码生成工具

报错解决：
Table configuration with catalog null, schema null, and table user did not resolve to any tables
Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.7:generate (default-

下载

Vue - element-ui 中预览 word 、exce、ppt以及pdf文件
 SpringBoot的文件上传与下载

springboot整合vue实现上传下载文件:这个idea里面有，不过运行报错，项目名称springboot-file,下载它的时候下载了一个大的springboot的项目，叫springboot-demo

IDEA集成MyBatis Generator 插件详解

下次抽空完成下载的前后端，具体要参考这里面的博客和efo

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/384050