VUE -- 用组件上传文件和用xmlrequest上传
xmlrequest:
sendForm(str, types) {
var form = this.$refs.ipas_form;
var oOutput = document.querySelector("div"),
oData = new FormData((document.forms.namedItem(str)));
oData.append("username", "This is some extra data");
var oReq = new XMLHttpRequest();
//oReq.open("POST", "https://sddeznsm.com/file?type="+ types +"&app_name="+$("#app_name").val(), true);
oReq.open("POST", "http://localhost:9000/file?type=" + types + "&app_name=" + form.text, true);
oReq.onload = function (oEvent) {
if (oReq.status == 200) {
alert("上传成功");
// oOutput.innerHTML = "Uploaded!";
} else {
alert("上传失败");
// oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
}
};
oReq.send(oData);
}
组件(iview-admin):
<div style="display: block;width: 100%;text-align: center;">
<Upload
action="http://localhost:9000/file?type=ipas&app_name=jinan"
:on-format-error="handleFormatError"
:max-size="204800"
:before-upload="handleBeforeUpload"
:on-progress="handleProgress"
:on-success="handleSuccess"
:on-error="handleError"
>
<span>请选择文件 </span>
<Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
</Upload>
</div>
监听上传过程:
methods: {
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确,请选择图片文件。'
});
},
handleBeforeUpload (file) {
this.$Notice.warning({
title: '文件准备上传',
desc: '文件 ' + file.name + ' 准备上传。'
});
},
handleProgress (event, file) {
this.$Notice.info({
title: '文件正在上传',
desc: '文件 ' + file.name + ' 正在上传。'
});
},
handleSuccess (evnet, file) {
this.$Notice.success({
title: '文件上传成功',
desc: '文件 ' + file.name + ' 上传成功。'
});
},
handleError (event, file) {
this.$Notice.error({
title: '文件上传失败',
desc: '文件 ' + file.name + ' 上传失败。'
});
},
VUE -- 用组件上传文件和用xmlrequest上传的更多相关文章
- jmert中如何测试上传文件接口(测试上传excel文件)
第一次用jmeter这个工具测试上传接口,以前没做过这一块,导致走了很多弯路.特地把经验谢谢,怕自己以后忘记... 一,jmeter如何上传文件 jmeter 的 http requests post ...
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。
element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...
- .net 实现上传文件分割,断点续传上传文件
一 介绍 断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头. 来个简单的介绍 所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本 ...
- iOS上传文件,有关http上传协议-RFC1867
以上是抓包HTML input file标签上传的内容 只要模拟上面http 的header跟body就可以成功. 整体说明: post 上传文件时,以在http body里面带参数,参数的格式,根据 ...
- C语言 HTTP上传文件-利用libcurl库上传文件
原文 http://justwinit.cn/post/7626/ 通常情况下,一般很少使用C语言来直接上传文件,但是遇到使用C语言编程实现文件上传时,该怎么做呢? 借助开源的libcurl库,我们 ...
- XShell上传文件到Linux服务器上
在学习Linux过程中,我们常常需要将本地文件上传到Linux主机上,这里简单记录下使用Xsheel工具进行文件传输 1:首先连接上一台Linux主机 2:输入rz命令,看是否已经安装了lrzsz,如 ...
- linux scp上传文件到其他机器上
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- python发送post请求上传文件,无法解析上传的文件
前言 近日,在做接口测试时遇到一个奇葩的问题. 使用post请求直接通过接口上传文件,无法识别文件. 遇到的问题 以下是抓包得到的信息: 以上请求是通过Postman直接发送请求的. 在这里可以看到消 ...
随机推荐
- hadoop2.6.4【windows7】构建maven项目 系列2
准备windows版本的hadoop2.6.4 下载windows版本的hadoop2.6.4解压在本地 新建maven项目构建hadoop依赖 <?xml version="1.0& ...
- PHPEXCEL 设置被导出的表格样式代码
1.设置表格高度.宽度 代码: $objPHPExcel->getActiveSheet()->getRowDimension('6')->setRowHeight(30);//行高 ...
- hdu 2578 Dating with girls(1) (hash)
Dating with girls(1) Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- [poj] 2618 popular cows
原题 这是一个强连通分量板子题. a thinks b is popular 即为a到b有一条边,要求被所有牛popular的牛的个数. 所求为对图进行强连通分量缩点后,没有出度的强连通分量里的点数( ...
- 洛谷 P3168 [CQOI2015]任务查询系统 解题报告
P3168 [CQOI2015]任务查询系统 题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分. 超级计算机中的任务用三元组\((S_i,E_i,P_i) ...
- display:table-cell的min-height
table-cell的元素min-height是不起作用的,直接使用height就行,当高度不足时,table会自动拉伸cell元素. 此时,height相当于min-height. 出处:https ...
- 《R语言实战》读书笔记--第五章 高级数据管理
本章内容: 数学和统计函数 字符处理函数 循环和条件执行 自编函数 数据整合与重塑 5.1一个数据处理难题 5.2数值和字符处理函数 分为数值函数和字符串函数,下面是数学函数截图: ceiling.f ...
- Share single RDM between multiple VM's in ESX
1.Create a VM01 on esx01,Create a VM02 on esx02 2.Create the RDM on your VM01 (using the virtual, no ...
- [03]使用阿里RAP搭建前端Mock Server
MockServer可以减少前端开发对后端的依赖,提高前端开发的效率,同时也利于团队的协作. 什么是RAP? RAP是阿里团队出的一款WEB接口管理工具,帮助开发人员更高效的管理接口文档,同时通过分析 ...
- transition transform animate的使用
注:代码显示效果可以自行粘贴复制查看 transition(过渡),主要是关注property的变化主要有四个属性transition-property.transition-durantion.tr ...