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>请选择文件&nbsp;&nbsp;</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上传的更多相关文章

  1. jmert中如何测试上传文件接口(测试上传excel文件)

    第一次用jmeter这个工具测试上传接口,以前没做过这一块,导致走了很多弯路.特地把经验谢谢,怕自己以后忘记... 一,jmeter如何上传文件 jmeter 的 http requests post ...

  2. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  3. element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。

    element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...

  4. .net 实现上传文件分割,断点续传上传文件

    一 介绍 断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头. 来个简单的介绍 所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本 ...

  5. iOS上传文件,有关http上传协议-RFC1867

    以上是抓包HTML input file标签上传的内容 只要模拟上面http 的header跟body就可以成功. 整体说明: post 上传文件时,以在http body里面带参数,参数的格式,根据 ...

  6. C语言 HTTP上传文件-利用libcurl库上传文件

    原文  http://justwinit.cn/post/7626/ 通常情况下,一般很少使用C语言来直接上传文件,但是遇到使用C语言编程实现文件上传时,该怎么做呢? 借助开源的libcurl库,我们 ...

  7. XShell上传文件到Linux服务器上

    在学习Linux过程中,我们常常需要将本地文件上传到Linux主机上,这里简单记录下使用Xsheel工具进行文件传输 1:首先连接上一台Linux主机 2:输入rz命令,看是否已经安装了lrzsz,如 ...

  8. linux scp上传文件到其他机器上

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...

  9. python发送post请求上传文件,无法解析上传的文件

    前言 近日,在做接口测试时遇到一个奇葩的问题. 使用post请求直接通过接口上传文件,无法识别文件. 遇到的问题 以下是抓包得到的信息: 以上请求是通过Postman直接发送请求的. 在这里可以看到消 ...

随机推荐

  1. role management

    role management https://panjiachen.github.io/vue-element-admin/#/permission/page

  2. 使用Unity 实现ASP.NET Web API 依赖注入

    DI/IoC 的设计前面已经讲过好几次了,简单的一段话说明就是:「目标对象与外部相依的方式仅相依于 interface,而相依 interface 的 instance 透过 constructor ...

  3. Codeforces Round #384 (Div. 2) 734E(二分答案+状态压缩DP)

    题目大意 给定一个序列an,序列中只有1~8的8个整数,让你选出一个子序列,满足下列两个要求 1.不同整数出现的次数相差小于等于1 2.子序列中整数分布是连续的,即子序列的整数必须是1,1,1.... ...

  4. python登录qq

    登录qq的用的是get方法, 首先抓login_sig(某个包中的cookie),接着验证码的包(包含对验证码的校验),,最后计算一个p的加密算法,接着再get请求一个链接 https://ssl.p ...

  5. week01-绪论报告

    一.作业题目: 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数). 有理数基本运算: 构造有理数T,元素e1,e2分别被赋以分子.分母值 ...

  6. Java并发笔记(一)

    1. lock (todo) 2. 写时复制容器 CopyOnWrite容器即写时复制的容器.通俗的理解是当我们往一个容器添加元素的时候,不直接往当前容器添加,而是先将当前容器进行Copy,复制出一个 ...

  7. bananahill(NOIP模拟赛Round 8)

    题目描述 香蕉川由座香蕉山组成,第i座山有它的高度.小Z准备从左到右爬这里的恰好座香蕉山,但他不希望山的高度起伏太大,太过颠簸,会让本就体育不好的他过于劳累.所以他定义了爬山的劳累度是所有爬的相邻的两 ...

  8. OpenCV实践之路——人脸检测(C++/Python) 【转】

    转自:http://blog.csdn.net/xingchenbingbuyu/article/details/51105159 版权声明:本文为博主原创文章,转载请联系作者取得授权. 本文由@星沉 ...

  9. Jquery Dom节点常用操作

    select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...

  10. 【linux高级程序设计】(第十二章)Linux多线程编程 3

    条件变量通信机制 条件变量必须配合互斥锁一起实现对资源的互斥访问 使用方法: int pthread_cond_init (pthread_cond_t *__restrict __cond, __c ...