本文为博主原创，未经允许不得转载

1.vue页面

placeholder="请选择客户">

v-for="customerInfo in customerArray"

:key="customerInfo.id"

:label="customerInfo.name"

:value="customerInfo.id">

@change="onPublicChange" :before-upload="beforeUpload">

浏览

注：公钥：crt|pem|cer

@change="onPrivateChange" :before-upload="beforeUpload ">

浏览

注：私钥：key

2.上传文件时的校验

onPublicChange({fileList}) {

try {

var file = fileList[fileList.length - 1];

if (file && !/.(crt|pem|cer)$/.test(file.name)){

UxMessage.warning('请上传正确格式的公钥');

return;

}

this.publicFileList = fileList.slice(fileList.length - 1, fileList.length);

} catch(e) {

console.log(e);

}

},

onPrivateChange({fileList}) {

try {

var file = fileList[fileList.length - 1];

if (file && !/.(key)$/.test(file.name)){

UxMessage.warning('请上传正确格式的私钥');

return;

}

this.privateFileList = fileList.slice(fileList.length - 1, fileList.length);

} catch(e) {

console.log(e);

}

},

3.使用formData上传后台：

//创建 formData 对象

let formData = new FormData();

//多个文件上传

formData.append("publicFile", publicKey); // 文件对象

formData.append("privateFile", privateKey); // 文件对象

formData.append("authorizationDomain", values.authorizationDomain);

formData.append("customerId", values.customerId);

_this.$http.post('/certificate/updateCheck.do',formData)

.then(function (response) {

}

4.java代码：

@ResponseBody

@RequestMapping(value = "/updateCheck", method = {RequestMethod.POST})

public RequestResult updateCheck(Certificate certificate) {

}

public class Certificate {

private Long customerId;

private String authorizationDomain;

private MultipartFile publicFile;

private MultipartFile privateFile;

}

5.效果图：

Multipart/form-data POST文件上传详解

Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下:

Multipart/form-data POST文件上传详解(转)

Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下:

构建multipart/form-data实现文件上传

构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

FormData实现文件上传实例

单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. Form ...

HTML5 FormData实现文件上传实例

表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

iframe 模拟ajax文件上传and formdata ajax 文件上传

对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传

之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: ...

Multipart/form-data POST文件上传

简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下:

.NET和.NET Core Web APi FormData多文件上传对比

前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

随机推荐

Spring中@Autowired注解、@Resource注解的区别

Spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@PostConstruct以及@PreDestroy. @Resour ...

BZOJ1008 ／乘法原理＋快速幂 解题报告

1008: [HNOI2008]越狱 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生 ...

【BZOJ 4326】【NOIP2015】运输计划

http://www.lydsy.com/JudgeOnline/problem.php?id=4326 题目描述 公元2044年,人类进入了宇宙纪元. 国有个星球,还有条双向航道,每条航道建立在两个 ...

dota BP练习工具开发：一个C/S多用户程序

首发:个人博客,更新&纠错&回复 客户端采用C#开发,服务器使用java开发,通信方式为socket. 1.首先决定交互协议 客户端指令协议: getgames:要求服务端发送game ...

(1)redis下载编译

一.redis下载编译 这里没什么好说的 用的版本是redis-2.8.17 1)redis-server是可执行程序 2)mian函数在redis.c里面 3)如果要修改调试 这届在src目录下   ...

初测WIN10

WIN10已经发布,通过百度直通车把WIN7升级成了WIN10,改变较大,不太习惯,用着不是很顺手. 吐槽几个问题 1.微软的Visual Studio 2015 Community版本,宣布是免费的 ...

linux调度器 信息解读

http://blog.csdn.net/wudongxu/article/category/791519

配置并学习微信JS-SDK(1)

微信JS-SDK ...

Nova 无法向虚机注入密钥

欢迎各位关注我的博客:http://weibo.com/u/216633637 废话开头: 之前参考这位同学的博客http://www.cnblogs.com/awy-blog/p/3447176.h ...

video.js支持m3u8格式直播

为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...