element中upload上传文件遇到校验问题

在做上传的时候，遇到的需求是需要对选择的文件进行文件名唯一校验。当我们选择文件以后，点击上传按钮，在文件状态改变时的钩子on-change里做校验规则，

成功或者失败都会重新再走一次这个函数。所以当后端数据库里没有这条数据是，点击上传会显示一条上传成功，紧接着一条文件名已存在。bug来了，“走校验”在成功后也会出现一次。我想到的办法是，我们不用“this.$refs.upload.submit()”方法，自定义上传接口。

此时，，我们在.then里执行成功失败的操作。这是后还得注意一个问题，就是传参格式是form data，还得传file文件流

我们可以从"raw"里面取到文件流。接着我们走接口，传参。

结束！

原文地址：https://www.cnblogs.com/xueww/p/11643844.html

时间： 2024-10-07 23:21:24

element中upload上传文件遇到校验问题的相关文章

asp.net中fileupload上传文件的方法

FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\test.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件. 用户选择要上载的文件后,FileUpload 控件不会自动将该文件保存到服务器.您必须显式提供一个控件或机制,使用户能提交指定的文件.例如,可以提供一个按钮,用户单击它即可上载文件

MVC中如何上传文件

本文导读:在MVC中实现文件上传与传统的WebForm上传文件方法都差不多,在cshtml视图页面放一个file标签,然后在actionname方法中处理用户上传的文件.下面简单介绍MVC中上传文件的方法. 一.MVC中如何上传文件 1.在Web Forms中,当你把一个FileUpload控件拖到设计器中,你或许没有注意到在生成的HTML中会在form标签中加入一条额外属性 enctype="multipart/form-data". 而FileUpload控件本身会生成为<i

Android应用开发中webview上传文件的几种思路

1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClient { // For Android 3.0+ public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) { if (mUploadMessage != null) return; mUploadMe

java开发中截取上传文件的文件名和后缀名

java开发中截取上传文件的文件名和后缀名 /** * Return the extension portion of the file's name . * * @see #getExtension */ public static String getExtension(File f) { return (f != null) ? getExtension(f.getName()) : ""; } public static String getExtension(String f

使用Ajax.BeginForm 中需要上传文件但 Request.files获取不到

使用Mvc里的插件jquery.unobtrusive-ajax.min.js 之前一直困在这里,一开始以为添加属性enctype="multipart/form-data"就可以网上看到都是用另外一个插件jquery.form.js 于是,从某篇文章的附件中下载了jquery.form.js,弄了许久,还不行,顿时泪崩了, 最后在官网下载最新的jquery.form.js就解决了 ==|| 使用Ajax.BeginForm 中需要上传文件但 Request.files获取不到

element-ui upload上传文件并携带参数使用formData对象

需求:上传文件的时候,需要携带其他的参数问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的解决:获取到的data数据,使用formData.append()方法添加上就可以啦,然后把整个formData传给后台就可以了比如后台需要三个参数 :file .platformName.reconciliationData let formData = new FormData(); formData.ap

upload上传文件

上传Excel文件代码demo: 下载上传js文件:bower install ng-file-uploa:引入js文件: angular.module('dc.workflow', [ 'ngFileUpload']); js代码:var data=this.data={file:null};//定义data.file为空: this.selectImage = function (file) { this.errorFileType = false; if (file[0].type !=

SpringMvc (注解)中的上传文件

第一步:导入commons-fileupload-1.3.1.jar 和commons-io-2.2.jar 架包第二步:在applicationContext.xml中配置 <bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”/> 第三步:在页面 <form>标签添加属性enctype=”multipart/form-dat

【springmvc】springmvc中如何上传文件

使用到的组件:可自行根据情况选择版本  <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency>