vue表单文件上传_vue表单上传-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46136821/article/details/115694764

本文详细介绍了如何使用HTML的input元素结合JavaScript或Vue进行文件上传，并通过Ajax或axios发送multipart/form-data请求到后台。同时，讲解了如何清除input的值，确保交互的顺畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

填写表单,然后根据需要选择文件,最后将数据一起提交给后台

使用

<input ref="file" type="file" multiple="multiple"/> 上传文件

multiple="multiple" 多选

获取值

js

document.getElementById("file").files

vue

this.$refs.file.files

提交

ajax

需要加请求头

var files = document.getElementById("file").files
var formdata = new FormData();
const arr = Array.from(files);  // files是个对象 转换成数组
arr.map(function (element) {
  formdata.append("file", element);
});
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      console.log("响应成功")
    }
  }
}
//建立连接           这里填自己的服务器地址
xhr.open("post", "http://www.123.com");
xhr.setRequestHeader("enctype","multipart/form-data")
xhr.setRequestHeader("processData", false)
xhr.setRequestHeader("contentType", false)
xhr.setRequestHeader("cache", false)
//发送请求
xhr.send(formdata);

vue

使用的axios,按post请求正常传值就可以了,这里传formdata,不用加请求头

const formdata = new FormData()
const files = Array.from(this.$refs.file.files)
files.map(file => {
formdata.append('file', file)
})

最后,如果要清除input的值:

this.$refs.file.value = ''