当前位置: 首页 > news >正文

Vue使用axios实现:上传文件、下载文件

  Vue 使用 axios 框架,系列文章:

《Vue使用axios实现Ajax请求》

《Vue使用axios二次封装、解决跨域问题》

《Vue使用axios实现:上传文件、下载文件》

在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。Axios 提供了一些方便的方法来上传文件,包括使用 FormData、设置 Content-Type 为 multipart/form-data 等。

文件上传是将本地计算机中的文件发送到服务器的过程。在前端开发中,通常使用 <input type="file"> 元素来实现文件选择功能。用户通过点击这个元素,选择需要上传的文件。然后,前端代码将选中的文件传递给后端服务器。

1、上传文件

使用 FormData 对象,FormData 是一个用于创建表单数据的 API,可用于发送包含文件和其他表单数据的 multipart/form-data 请求。这是处理文件上传的常用方法。通过FormData对象,可以将文件数据添加到表单中,然后使用 Axios 的 post 或 put 方法发送请求。

(1)前端代码:使用 Vue 编写前端脚本

<template><!-- 通过表单提交方式:<form name="myForm" action="http://127.0.0.1:8081/uploadFile" method="post" enctype="multipart/form-data"> --><form name="myForm" method="post" enctype="multipart/form-data" v-on:submit.prevent="uploadFileStatement()">上传文件:<input type="file" name="fil

相关文章:

  • .NET Core DI(依赖注入)的生命周期及应用场景
  • React 更新state中的对象
  • Doris 中 Compaction 问题的深度剖析与解决方案
  • linux编译adbd工具使用
  • Python + Playwright:规避常见的UI自动化测试反模式
  • Spark-SQL核心编程
  • 基于PyQt5和OpenCV的传统图像分割应用UI程序
  • 100个有用的AI工具 之 生成透明图像LayerDiffuse
  • 欧拉服务器操作系统部署deekseep(Ollama+DeekSeep+open WebUI)
  • 解决 Spring Boot 启动报错:数据源配置引发的启动失败
  • Windows 图形显示驱动开发-WDDM 1.2功能~显示设备的容器id支持
  • 双链表各种操作实现(数据结构C语言多文件编写)
  • QT中多线程写法
  • 摄影测量——单像空间后方交会
  • AI知识补全(十六):A2A - 谷歌开源的agent通信协议是什么?
  • 集成学习介绍
  • 【YOLOv8改进 - 特征融合】EFC: 基于增强层间特征关联的轻量级即插即用融合策略,即插即用适,用于小目标检测
  • AIP-233 批量方法:Create
  • 中和农信的“三农”服务密码:科技+标准化助力乡村振兴
  • React中 点击事件写法 的注意(this、箭头函数)
  • 牛市早报|中美经贸高层会谈达成重要共识,取得实质性进展
  • 社恐也能嗨起来,《孤独摇滚》千人观影齐舞荧光棒
  • 王毅同印度国家安全顾问多瓦尔通电话
  • 无人机穿越大理千年古塔落券洞内,涉事“飞手”被行拘10日
  • 港理大研究揭示:塑胶废物潜藏微生物群落或引发生态危机
  • 保利发展前4个月销售额约876亿元,单月斥资128亿元获4个项目