vue项目实现文件上传

最新推荐文章于 2025-05-22 12:10:41 发布

月半的小白

最新推荐文章于 2025-05-22 12:10:41 发布

阅读量696

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_35158525/article/details/103619720

本文介绍了一个使用Vue.js实现文件上传的实例，详细展示了如何利用axios和FormData进行文件选择、读取及发送到服务器的过程。

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

vue项目实现文件上传

<div class="inputFile">
  <span class="input-group">
	  <input class="uploadFile com-btn-upload" id="upload_file" name="file" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @change="getFile"/>
	  <button type="button" class="btn btn-primary">上传文件</button>
  </span>
</div>

getFile(event) {
  var file = document.getElementById("upload_file").files[0];
  var formdata1 = new FormData();// 创建form对象
  formdata1.append('excelFile', file);// 通过append向form对象添加数据,可以通过append继续添加数据
   //添加请求头
  let config = {
    headers: {'Content-Type': 'multipart/form-data'}
  };
  axios.post(home + '/systemTrainDataManage/importSystemTrainAndMDBSF', formdata1, config).then(response => {
    if (response.data.code == 200) {
       $dialog.alert("添加成功", "success", 3000);
    } else {
       $dialog.alert(response.data.message, "error", 3000);
    }
	$("#upload_file").val("");
   })
},