Vue axios与FormData结合提交文件,并且展示用户图片文件
来源:互联网 发布:三峡大学网络课程 编辑:程序博客网 时间:2024/06/11 06:48
学习笔记
FormData对象:
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
FormData对象的创建以及使用:
var formData= new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象var content= '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...var blob= new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request= new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
FormData对象的append方法,使用键值对的方式,例如上述例子的'username'是KEY,而'Groucho'为value.
还有通过表单的形式创建FormData对象,具体查看点击打开链接,MDN有具体的解释,以上示例均来自MDN
axios:
基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
功能特性
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击
具体使用方式以及简介:https://www.awesomes.cn/repo/mzabriskie/axios
这里用axios主要是结合Vue使用,Vue2.0开始,作者就宣布不更新vue-resource,所以决定使用axios.
在vue中使用axios,需要通过NPM insatll后,引入axios模块
然后设置 Vue的原型后才能使用:
Npm install axios --save
import axios from ‘axios’
Vue.prototype.$http = axios
结合Vue、axios、FormData使用的例子:
<template>
<div id="sample">
<!--accept定义接收的文件类型,这里只接受图片-->
<input id="fileinput" @change="uploading($event)" type="file" accept="image/*">
<button @click="submit($event)"></button>
<!--图片展示-->
<img :src="src"/>
</div>
</template>
<script>
export default {
name: 'sample',
data () {
return {
file:'',
src:''
};
},
methods:{
uploading(event){
this.file = event.target.files[0];//获取文件
var windowURL = window.URL || window.webkitURL;
this.file = event.target.files[0];
//创建图片文件的url
this.src = windowURL.createObjectURL(event.target.files[0]);
},
submit(){
event.preventDefault();//取消默认行为
let formdata = new FormData();
formdata.append('file',this.file);
let config = {
headers: {
'Content-Type': 'multipart/form-data' //之前说的以表单传数据的格式来传递fromdata
}
};
this.$http.post('/upload', formData, config).then( (res) => {
//做处理
}).catch((error) =>{
});
}
}
};
</script>
<style lang="css" scoped>
</style>
使用这些知识点运用在自己的项目中做了一个例子:
点击摄像头上传图片文件后获取文件并展示:
知识点参考链接:
FormData: MDN
Vue : Vue官网
axios:axios的简介与使用
axios结合formData使用:点击打开链接
- Vue axios与FormData结合提交文件,并且展示用户图片文件
- axios post提交formdata
- ajax提交文件 FormData
- vue axios 表单提交上传图片
- jquery FormData异步提交文件
- Ajax利用FormData提交文件和数据
- SpringBoot+Ajax文件上传+FormData表单提交
- axios表单提交--vue.js
- formdata异步上传图片(文件)
- 前端AJAX FORMDATA 提交文件,服务端读取文件和文件名
- SpringMVC+Ajax用FormData对象上传页面的图片(文件),并且立马在页面上显示出来
- 利用html5的FileReader对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)
- vue添加axios,并且指定baseurl
- ajax结合formdata实现往服务器上传文件
- spring mvc 配合ajax进行表单提交(有文件上传)并且提醒用户提交成功
- vue使用axios来请求本地json文件
- el-upload 与 FormData上传文件
- 文件上传与FormData对象的使用
- POSIX信号量实现互斥
- 谷歌正考虑商用量子计算服务
- 《致橡树》 舒婷
- Eclipse 使用mybatis generator插件自动生成代码
- vim常用命令附带几个Markdown常用数学符号
- Vue axios与FormData结合提交文件,并且展示用户图片文件
- Annotation成员的读取
- SPI总线的初步认识
- 字符串
- 数据结构实验之栈:行编辑器
- 凸函数(convex)
- C语言——插入排序
- Oracle12C--触发器(五十二)
- 冒泡排序的改进:鸡尾酒排序