vue实现文件上传
文件上传的传统方式是通过 form 表单提交,但是今天我们将换一种方式来实现这个功能。同一口味的东西吃多了还会腻呢,所以适当的时候换一换口味还是有必要的,好了,直接进入正文。首先,来介绍一下我们今天的主角 --- FormData,是的,就是他,虽然他和 form长得有点像,但是是2个不一样的东西。对于form相信大家一定不陌生,所以我们重点介绍一下 FormData。FormData对象可以组装
·
文件上传的传统方式是通过 form 表单提交,但是今天我们将换一种方式来实现这个功能。同一口味的东西吃多了还会腻呢,所以适当的时候换一换口味还是有必要的,好了,直接进入正文。
首先,来介绍一下我们今天的主角 --- FormData,是的,就是他,虽然他和 form长得有点像,但是是2个不一样的东西。对于form相信大家一定不陌生,所以我们重点介绍一下 FormData。
FormData对象可以组装一组用 XMLHttpRequest 发送请求的键/值对.它可以灵活方便的发送表单数据,因此可以独立于表单使用.如果把表单的编码类型设置为 multipart/form-data,则通过 FormData 传输的数据格式和表单通过 submit() 方法传输的数据格式相同.
<input type="file" class="file"> // 通过file来选择需要上传的文件
var formData = new FormData() // 声明一个FormData对象
var formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
formData.append('userfile', document.querySelector('input[type=file]').files[0]) // 'userfile' 这个名字要和后台获取文件的名字一样;
//'userfile'是formData这个对象的键名
var options = { // 设置axios的参数
url: '请求地址',
data: formData,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.axios(options).then((res) => {}) // 发送请求
到这里,我们就已经成功实现了文件的上传,是不是觉得很简单?小伙伴们,赶紧动手试一试吧。
更多推荐
已为社区贡献2条内容
所有评论(0)