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)


相关推荐

  • 高并发解决方案-代理服务器Nginx[通俗易懂]

    高并发解决方案-代理服务器Nginx[通俗易懂]文章目录Nginx1.Nginx概念2.Nginx的应用场景3.Linux环境下Nginx的安装与启动4.Nginx静态网站部署5.Nginx配置虚拟主机5.1端口绑定5.2域名绑定5.2.1域名概念5.2.2域名级别5.2.3域名与ip绑定6.Nginx反向代理6.1反向代理概念6.2配置反向代理7.Nginx负载均衡7.1负载均衡概念7.2准备工作7.3配置负载均衡Nginx1.Nginx概念    Nginx是⼀款高性能的http服务器/反向代理服务器及电子

  • Python爬取热搜数据之炫酷可视化[通俗易懂]

    Python爬取热搜数据之炫酷可视化[通俗易懂]可视化展示看完记得点个赞哟微博炫酷可视化音乐组合版来了!项目介绍背景现阶段、抖音、快手、哗哩哗哩、微信公众号已经成为不少年轻人必备的“生活神器”。在21世纪的今天,你又是如何获取外界的信息资源的?相信很多小伙伴应该属于下面这一种类型的:事情要想知道快,抖音平台马上拍;微博热搜刷一刷,聚焦热点不愁卖;闲来发呆怎么办,B站抖音快手来;要是深夜无聊备,微信文章踩一踩;哈哈哈,小小的活跃一下气氛在这个万物互联的时代,已不再是那个“从前慢,车马慢….

  • Spring boot Value注入 未整理 待完善

    Spring boot Value注入 未整理 待完善Spring boot Value注入 未整理 待完善

  • Java实现将数字转为大写汉字

    Java实现将数字转为大写汉字

  • Hive修改字段类型_hive表添加字段sql

    Hive修改字段类型_hive表添加字段sqlhive修改字段类型语句:altertable表名changecolumn原字段名新字段名字段类型;altertableuser_chainchangecolumnu_registeru_registedate;(u_register原类型为string类型)这样修改会报一个错误:FAILED:ExecutionError,returncode1fro…

  • 史上最硬核的Linux命令大全,还不收藏? ❤️【通俗易懂,小白一看就会】「建议收藏」

    史上最硬核的Linux命令大全,还不收藏? ❤️【通俗易懂,小白一看就会】「建议收藏」目录????前言????命令汇总????文件管理1️⃣ls命令–显示指定工作目录下的内容及属性信息2️⃣cp命令–复制文件或目录3️⃣mkdir命令–创建目录4️⃣mv命令–移动或改名文件5️⃣pwd命令–显示当前路径????文档编辑1️⃣cat命令–在终端设备上显示文件内容2️⃣e…

    2022年10月21日

发表回复

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

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