Vue文件上传问题合集

Vue文件上传问题合集目录1.背景2.环境3.问题集1)文件上传完成后,文件名的回显2)文件上传完成前的加载状态3)文件上传作为必填项1.背景在使用Vue+ElementUI进行前端工程开发中,遇到一些文件上传的问题,包括上传、回显、等待等。这里做一些记录,方便以后查看2.环境npm 6.14.12 vue-admin-template 4.4.0 axios 0.18.1 element-ui 2.13.2 3.问题集1)文件上传完成后,文件名

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

目录

1.背景

2.环境

3.问题集

1)文件上传完成后,文件名的回显

2)文件上传完成前的加载状态

3)文件上传作为必填项


1.背景

在使用Vue+ElementUI进行前端工程开发中,遇到一些文件上传的问题,包括上传、回显、等待等。这里做一些记录,方便以后查看

2.环境

npm 6.14.12
vue-admin-template 4.4.0
axios 0.18.1
element-ui 2.13.2

3.问题集

1)文件上传完成后,文件名的回显

关键属性el-upload中 :file-list, :show-file-list

详细代码请往后看~~

参考:

https://www.jb51.net/article/183328.htm

vue+elementUI上传图片/文件,编辑时回显文件名_LBJSagiri的博客-CSDN博客

elementUI上传图片回显在编辑 – 写手在作画 – 博客园

根据elementui中的上传组件upload,手写一个编辑时回显上传文件以及继续新增文件的功能 – 简书

 element-ui Upload 上传文件再编辑显示的两种方式_liaoxuewu的博客-CSDN博客

2)文件上传完成前的加载状态

关键属性v-loading和el-upload中:on-progress。

详细代码请往后看~~

参考:

 vue自定义指令v-loading_伴个人993的博客-CSDN博客

【转】Vue v-loading实现加载效果 – 花影疏帘 – 博客园

vue+element-ui中上传文件使用Progress自定义实时更新进度条 – 简书

vue element-ui 上传文件的 :on-progress钩子无法触发的原因及报错原因 – 嘉煠 – 博客园

3)文件上传作为必填项

关键属性 el-form中定义prop和:rules。上传后,必填提示清除

详细代码请往后看~~

参考:

【vue】vue表单必填项前面添加红色*_小朋友的博客-CSDN博客

vue上传文件,文件是必填项的验证 – 吃的快不吐骨头 – 博客园

<template>
  <div v-loading="loading" ref="fileUpload">
	<el-form-item label="文件上传" ref="fileUpload" prop="filepath" :rules="rules.file">	// 必填项以及规则
	   <el-upload
		 v-model="item.filepath"
		 :on-success="handleFileSuccess"
		 :on-remove="handleFileRemove"
		 :before-remove="beforeFileRemove"
		 :on-exceed="handleUploadExceed"
		 :file-list="fileList"            // 文件列表
		 :show-file-list="isShow"        // 文件回显标记
		 :action="'/myService/file/upload'"
		 :limit="1"
		 class="upload-demo"
	   >
		 <el-button size="small" type="primary">上传文件</el-button>
		 <el-tooltip placement="right-end">
		   <div slot="content">只能上传txt文件,且不超过2MB</div>
		   <i class="el-icon-question" />
		 </el-tooltip>
	   </el-upload>
	</el-form-item>
  </div>
</template>

export default {
	data() {
		return {
			loading: false,
			item: {
				filepath: "",
			},
			
			// 必填项规则
			rules: [
				file: {required: true, message:"文件必须上传", trigger: "change"}
			]
		}
	
	},
	handleFileSuccess(response) {
	  this.item.filepath = response.data.items.filepath;		// 后端返回的对象key为items,其中文件链接存放在变量filepath中
	  if (this.item.filepath != null) {
		this.isShow = true;
		this.$message({
		  showClose: true,
		  message: "上传成功!",
		  type: "success",
		});
		(this.rules.file = []), this.$refs.fileUpload.clearValidate();		// 动态删除文件上传必填的提示信息
	  } else {
		this.isShow = false;
		this.fileList = [];
		this.$message({
		  showClose: true,
		  message: "上传失败!",
		  type: "error",
		});
	  }
	  this.loading = false;				// 上传完成后loading状态清楚
	},
	handleUploadExceed() {
	  this.$message.warning("想要重新上传文件,请先删除已上传的文件");
	},
	beforeFileRemove(file, fileList) {
	  return this.$confirm(`确定删除 ${file.name}`);
	},
	handleFileRemove() {
	  this.item.filepath = "";		// 删除文件时清空文件地址
	},
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170635.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Yii框架官方教程增补篇6——基础知识:应用、组件、配置、生命周期

    Yii框架官方教程增补篇6——基础知识:应用、组件、配置、生命周期

  • 西数移动硬盘无法读取(高枕无忧的成语)

    原标题:让你的秘密高枕无忧WDMyPassport随行版移动硬盘评测现在是一个数据爆炸的时代,游戏厂商所制作的游戏容量越来越大,短视频风靡我们拍出来的短片越来越多,生活工作中的重要资料更是要好好保存。所以移动硬盘是必备的,一款高速、轻薄、大存储的移动硬盘能改变我们的存储生活。这次入手这款WDMyPassport随行版移动硬盘外观设计小巧轻薄,同时读写速度都在100MB/S左右,还有密码保…

  • python的命名规则_python命名规则[通俗易懂]

    python的命名规则_python命名规则[通俗易懂]广告关闭腾讯云11.11云上盛惠,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!1、模块模块尽量使用小写命名,首字母保持小写,尽量不要用下划线(除非多个单词,且数量不多的情况)#正确的模块名importdecoderimporthtml_parser#不推荐的模块名importdecoder-特殊的如init模块,如果模块是包的私有模块会使用前缀加一个…

  • linux load average,Linux 平均负载 Load Average 详解[通俗易懂]

    linux load average,Linux 平均负载 Load Average 详解[通俗易懂]一、什么是LoadAverage?系统负载(SystemLoad)是系统CPU繁忙程度的度量,即有多少进程在等待被CPU调度(进程等待队列的长度)。平均负载(LoadAverage)是一段时间内系统的平均负载,这个一段时间一般取1分钟、5分钟、15分钟。二、如何查看LoadAverage?top命令,w命令,uptime等命令都可以查看系统负载;三、LoadAverage的3个数值各是什…

  • mysql的乐观锁使用_java悲观锁乐观锁定义

    mysql的乐观锁使用_java悲观锁乐观锁定义正确的理解MySQL的乐观锁,悲观锁与MVCC!首先声明,MySQL的测试环境是5.7前提概念数据库并发的三种场景乐观锁和悲观锁的澄清悲观锁乐观锁MVCC多版本并发控制总结乐观锁和悲观锁的抉择OCC,PCC,MVCC参考资料前提概念数据库并发的三种场景数据库并发场景有三种,分别为:读-读:不存在任何问题,也不需要并发控制读-写:有隔离性问题,…

  • [干货]手把手教你写一个安卓app

    摘要:最近有很多小伙伴在后台留言:AndroidStudio。我想大家是想写一个手机app吧,前面已经分享了在QT上如何写一个安卓蓝牙app,虽然qt可以做app但是比起AndroidStudio还是差很多了!这里我们介绍一种快速入门的方法来制作一款app,就算你是零基础小白没有学习过java语言,我相信看完我的文章半天时间你也会做一个安卓app。本文针对初学者,大佬勿喷啊!1.创建HelloWorld项目这里我就不介绍如何安装这个AndroidStudio软件了,网上有很多教程或者去B站找对应

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号