Element-Ui上传单个文件和上传多个文件

单个文件上传

        单个文件上传很简单，直接引用<upload>组件，里面有个必选的参数“action”,action="上传的地址",然后加上一个钩子，在上传成功之后把数据保存回表格，这是系统自动触发的，无须手动接收。

        我是上传到本地服务器，所以直接就是:

<el-upload action="http://localhost:8080/api/files/upload" :on-success="successUpload"></el-upload>

        <el-upload>和</el-upload>之间放一个上传的按钮：

<el-button>点击上传</el-button>

        按钮的参数可以自己调，比如size，样式等等，点击就可以触发上传功能，把钩子函数放在methods里面

    successUpload(res) {
      this.form.xxx = res.data;
    },

        xxx是你数据库里面存放文件对应的名称。

“多个文件”上传

        我在多个文件上传遇到些许问题，在一般情况下，你想批量上传这个upload之间就是支持的，你只需要设置点上传的限制罢了，但我需要做一个分批上传的组件，如下图：

        我按照单个文件上传的方法，钩子里加多一个this.form.xxx = res.data; 我这样在同一个框里分别上传两个文件，结果我两个文件上传到后台springboot的时候两个时间戳都是没问题的，保存在数据库的却是视频和文档都是文档的时间戳，就意味着在网页下载的时候视频和文档搞出来都是文档。于是我做了两个钩子，分别对应两个upload，结果就是后台springboot的时候两个时间戳都是没问题，数据库一个都没保存上。

        感觉是钩子在拿完之后被覆盖了，测试一下只上传视频，发现这个数据库保存的视频和文档都是视频，果真如此哈哈。问题还是出现在这个钩子上，制作两个钩子就好。

    successUpload(res) {
      this.form.video = res.data;
    },
    successUpload1(res) {
      this.form.testfile = res.data;
    },