vue + element 实现文件上传
2019-01-24 11:13
363 查看
当时写文件上传是一件让人难受的事情,测试了很久,终于完成。
写完之后超超超超超超级开心~
效果如下图:
功能描述:
- 点击添加,可以增加多条,如下图:
2. 点击删除,顾名思义,删掉这一行。
3. 点击照片后面的 x 号,进行图片删除或更改
如图:
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 = i this.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+elementui的table行内实现el-upload文件添加/多文件上传
- 关于vue+element ui 实现上传文件
- Vue上传文件:ElementUI中的upload实现
- vue实现文件上传
- vue-cli + ElementUI 实现自定义接口上传图片
- vue中实现文件的上传读取及下载
- 详解Vue+axios+Node+express实现文件上传(用户头像上传)
- SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )
- vue+element-ui上传文件
- Spring MVC 4使用Servlet 3 MultiPartConfigElement实现文件上传(带源码)
- vue中element 上传功能的实现思路
- SpringBoot+Vue.js实现前后端分离的文件上传功能
- vue 点击图标实现上传文件效果
- 基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)
- Vue2.0结合webuploader实现文件分片上传功能
- vue使用axios实现文件上传进度的实时更新详解
- Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- vue+vux实现移动端文件上传样式
- vue实现文件上传功能