vue + element 实现文件上传

当时写文件上传是一件让人难受的事情，测试了很久，终于完成。
写完之后超超超超超超级开心~
效果如下图：

功能描述：

点击添加，可以增加多条，如下图：

2. 点击删除，顾名思义，删掉这一行。
3. 点击照片后面的 x 号，进行图片删除或更改
如图：

4. 点击确定按钮，整合内容提交给接口
难点攻克：
1. 选择一个文件上传，添加第二条时，文件展示有误
2. 如果我一次增加了多条上传框，但从非第一个的上传按钮上传时，添加到了第一个点击上传的按钮下
3. 图片的自删和更换
4. 最后的上传格式
  嗯，从以上几点来一步步来处理问题
  第一步，写出基本上传html：

   // fileUploadLength 是要添加几条tr的总个数<tr v-for="(item,index) in fileUploadLength" :key="index" style="width: 100%;height: 50px;"><td><input class="desc">  // 文件描述</td><td><input class="ver">  // 文件版本</td><td style="width: 100px">//上传 - 官网中就有<el-upload:on-remove="handleRemove" // 文件列表移除文件时的钩子:before-upload="beforeUpload" // 上传文件之前的钩子，参数为上传的文件:before-remove="beforeRemove"  // 删除文件之前的钩子，参数为上传的文件和文件列表:limit="1" // 限制，每个上传按钮只能上传一个文件:file-list="fileList[index]" // 文件组:multiple="false" :on-exceed="handleExceed" // 文件超出个数限制时的钩子class="upload-demo"action=""><el-button size="mini" type="primary" @click="clickUpload(index)">{{ $t('file.click_upload') }}</el-button></el-upload></td><td>// 删除按钮<el-button type="text" @click="deleteTr(index)">{{ $t('table.delete') }}</el-button></td></tr>

第二步,充实对应的方法：

1. 只要点击上传就会执行该方法：

// 文件上传之时（文件不会上传成功，在触发下一步操作前截取文件信息）beforeUpload(file) {if (file) {// 添加-跳跃增 => 只能添加到第一位，后面的全删掉if (this.index === 0 && this.iNotUpload !== 0 && !this.addUpload) {this.fileUploadLength.splice(this.iNotUpload, this.fileUploadLength.length)}this.fileList[this.index++].push(file)}return false},

现在来说一下，为什么官网直接用的是 fileList，而我的代码用的是 fileList[0]这样的呢？
由于在这个添加会有增加多条tr，而每个tr都有一个上传按钮，如果直接用fileList，当我上传第一个文件之后，
再添加第二条，就会出现第二个文件名也出现在了第一个上传按钮下方的情况。
所以，为了文件和按钮的位置一一对应，使用下标控制。

2. 上传后 return false 相当于上传并没成功，就会自动执行删除操作：

 // 文件列表移除文件时的钩子（就是点击文件后的 x 进行删除或更改的操作）handleRemove(file) {// 防止 上传没成功就直接删除了文件。if (file && file.status === 'success') {  for (let i = 0; i < this.fileList.length; i++) {// 若是点击要删除的文件名与文件组中的某个文件名相同，则取其下标if (this.fileList[i].length && file.name === this.fileList[i][0].name) {this.fileList.splice(i, 1)this.index = ithis.fileList.splice(i, 0, []) // 删除该下标对应文件后，给该下标插入空数组占位，保证fileList长度this.addUpload = true}}}},

3. 删除之前的询问

 // 删除文件之前的钩子-弹出框询问beforeRemove(file, fileList) {// 处理 before-upload验证不通过后触发了on-remove的解决办法if (file && file.status === 'success') {return this.$confirm('你确定删除这个文件？')}},

4. 限制每个上传按钮对应文件的个数

  // 一个上传按钮只能添加一个文件，限制，不能超过一handleExceed(files, fileList) {this.$message.warning(this.$t('file.select_aPage'))},

和组件中的 :limit 共同使用

5. 上传：

// 点击上传按钮，按照下标上传，处理同时有多个上传按钮 但不按顺序上传的问题clickUpload(i) {// 新增-上传if (i !== 0 && !this.addUpload) {this.iNotUpload = i}},

6. tr 的增加：

// tr的添加按钮addTr() {// 保证添加首条后再点击添加按钮首条添加文件不会消失if (this.fileList.length) {this.fileList = this.fileList} else {this.fileList = []}this.fileUploadLength.push(0)for (let i = 0; i < this.fileUploadLength.length; i++) {this.fileList.push([])}},

7. tr 的删除：

    // tr的删除按钮deleteTr(index) {this.fileList.splice(index, 1)this.fileUploadLength.splice(index, 1)this.index--},

前三个难点在上述代码中已经解决：
难点一 => 下标控制
难点二 => 上传前触发的钩子方法中，跳跃增的处理
难点三 => 第二段代码，用splice(下标，个数，插入[ ])
现在来处理最后一个难点：走接口上传！
当时在网上找资料的时候，看到组件中的action里必须要写内容，官网中也是：

所以我在这里是懵的，最后发现写不写都没啥影响，反正用不到里面的地址，最后都是要走接口的。
方法详情参照链接：https://www.jianshu.com/p/e984c3619019
最后整理文件：

      var formdata = new FormData() // 创建一个对象实例// 我们后台不识别直接传一个数组过去，分割成对象for (let i = 0; i < this.fileList.length; i++) {if (this.fileList[i].length) {formdata.append('files', this.fileList[i][0])}}// 若是后台能接收到完整的数组（前提是把fileList中的数组拆成对象）：formdata.append('files', this.fileList)// 键值对类型（this.valObj对象是存放一些别的参数的）formdata.append('msgupgradeFileGroup', JSON.stringify(this.valObj))

这些功能是需要前后端联调的，最终完成真的特棒。
项目中有添加也有编辑，这里只是整理了添加，编辑的话也都大同小异。希望以后会更进一步！

vue + element 实现文件上传相关推荐

文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
vue采用 XLSX文件上传与下载
vue采用 XLSX文件上传与下载先安装xlsx npm install xlsx 安装之后直接在该页面script标签里面导入 import * as XLSX from 'xlsx' 注意此处 ...
SpringBoot+Vue+ElementUI实现文件上传与文件下载
作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎收藏转发分享专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...
SpringBoot+Vue表单文件上传
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8281181 ...
vue 的axios 文件上传
具体方法 Upload(file) { console.log(file.file);//获取文件对象var formData = new FormData();//新建表单对象formData.ap ...
vue 自定义图片文件上传结合elementui
默认展示点击上传之后的样子 (在重新选择图片的时候直接点击图片即可) <el-form label-width="120px" :model="formData& ...
VUE 项目大文件上传下载解决方案
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

vue + element 实现文件上传

vue + element 实现文件上传相关推荐

最新文章

热门文章