Vue使用Input大文件上传切片、修改file文件上传控件样式、清空已选择文件

#Vue使用Input大文件上传切片、修改file文件上传控件样式、清空已选择文件| 来源: 网络整理| 查看: 265

在掘金社区发布文章，并在正文的第一句加入“我正在参加「掘金·启航计划」”

前言:

最近重构公司项目核心内容就是大文件的上传功能,文件基本上都是几个G的,着手的是原生的input标签file, 大文件我们首先考虑到一个分片上传这样的功能我们先来说一说分片的好处

好处: 分片上传的好处是将一个大请求分成多个小请求来执行,这样当其中一些请求失败后,不需要重新上传整个文件,而只需要上传失败的分片就可以了可想而知如果不分片会造成文件的丢失,下一次上传从新开始上传,极大的浪费资源一方面给用户体验也不是很好

CSS样式:

修改前:修改前是和其他表单共用的弹窗

在这里插入图片描述

修改后:这里是另外单独的弹窗把上传事件加到确定事件上了

在这里插入图片描述

技术栈:

框架Vue2.0+Ant Design Vue组件库

代码展示:

template中

请选择模型压缩包 {{ filesName }} 复制代码

script中这里面就是整个切片的逻辑思维和注释代码

export default { data() { return { filesName: '', //获取上传文件的名称 cancel_img: '', tton: 0, labelCol: { xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, // 机构行样式 labelCol_JG: { xs: { span: 24 }, sm: { span: 3 }, }, wrapperCol_JG: { xs: { span: 24 }, sm: { span: 20 }, }, } }, methods: { // 获取上传文件的名称 handleFiles(event) { this.filesName = event.target.files[0].name }, save() { // 每个文件切片大小定为1M(1024*1024字节)(需要跟服务器协商好) var BYTES_PER_SLICE = (1 {//调用上传接口 if (res.code == 200) { this.$message.success('上传成功') this.confirmLoading = false //关闭loading加载 this.visible = false //关闭弹窗 //nextTick 函数是在下一次dom更新后回调， //这就可以实现先执行的上面的代码，让input[file]节点消失， //然后再dom更新后回调该函数，又执行了让input[file]节点显示，这样就实现了刷新 this.cancel_img = true this.$nextTick(() => { this.cancel_img = false }) this.filesName = '' //清除上传文件名称 } else { this.$message.console.error('上传失败') this.confirmLoading = false //关闭loading加载 } }) }, // 点击上传文件按钮 handleSubmit() { if (this.filesName != '') { this.save() } else { this.$message.error('请选择模型压缩包再点击上传') } }, // 取消按钮 handleCancel() { this.cancel_img = true this.$nextTick(() => { this.cancel_img = false }) this.filesName = '' //清除上传文件名称 this.visible = false }, }, } 复制代码

CSS样式覆盖原有的样式

.ipts { width: 210px; height: 128px; padding: 4px 10px; line-height: 127px; position: relative; border: 1px solid #999; text-decoration: none; color: #333; background-color: #fafafa; text-align: center; border: 1px dashed #999; border-radius: 5px; cursor: pointer; } .uploads { position: absolute; overflow: hidden; right: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } 复制代码总结: 以上就是所有内容和代码,欢迎大家指教复制代码

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章