elementui axios springboot 多文件上传下载 vue springboot文件上传

转载

mob64ca13fd163c 2024-01-02 12:32:22

文章标签 spring boot vue.js bc 上传 java 文章分类 iOS 移动开发

主要参考源码是

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>

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

主要参考以下代码：
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>

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

具体的实现是在 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>

配置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

配置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>

运行
双击即可

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

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