上传文件fetch,post

最新推荐文章于 2024-07-29 10:57:56 发布
最新推荐文章于 2024-07-29 10:57:56 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： vue vue3 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41820930/article/details/121946228
版权
vue 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
vue3
5 篇文章 0 订阅
订阅专栏
本文介绍了如何使用Element UI实现文件上传，并通过FormData发送到后端服务器。通过FJ_Upload事件处理POST请求，包括设置文件参数和处理服务器响应。重点在于`http-request`配置和`Content-Type`自动设置。
摘要由CSDN通过智能技术生成 
			<el-upload
              action="#"
              :http-request="FJ_Upload"
              :limit="3"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

data() {
    return {
      fileList: [],
      form: {
        appName: "",
        version: "",
        operationName: "",
        uploadTime: "",
      },
    };
  },

  // 上传事件
FJ_Upload(param) {
    		var formData = new FormData();
			formData.append('appFile', param.file);
    		formData.append("version",this.form.version);
    		this.flieParam = formData;
},
//确定时间
async submintNew() {
      const that = this;
      const res = await fetch('http://192.168.2.xx:8083/im/saveImAppInfo', {
       method: 'post',
       body: this.flieParam,
       })
      // if (res.downloadUrl) {
      //   that.$message.success('获取数据成功');
      //   this.form = Object.assign(this.form , res)
      // } else {
      //   that.$message.error('暂无数据');
      // }
    },

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

fetch:的请求头不需要设置,post 就需要’Content-Type’: ‘multipart/form-data’

headers: {
        'Accept': 'application/json',
        //不需要写'Content-Type': 'multipart/form-data',自动是form -data
        // 'Content-Type': 'multipart/form-data',
      },
先不要想收获，扎实
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue和fetch进行文件上传怎么写
weixin_35754962的博客
12-16 402
首先，需要在 HTML 中添加一个文件选择器和一个提交按钮。 <template> <form> <input type="file" ref="fileInput" /> <button type="submit">上传</button> </form> </template> 然后，在...
ReactNative学习----9Fetch之post请求数据，上传图片
翟浩浩Android专栏
03-15 703
github地址： https://github.com/react-native-community/react-native-image-picker 效果图： 使用步骤: 1cd 到项目目录下 yarn add react-native-image-picker react-native link react-native-image-picker 2在android目录下在Android...
H5 使用fetch 上传 file 文件。
神夜空间
08-21 406
【代码】H5 使用fetch 上传 file 文件。
一文介绍 fetch 配置和方法，助你快速上手掌握！
最新发布
梦是太匆
07-29 808
fetch()方法能让我们不使用任何依赖去请求数据，支持分块读取数据，提高网站性能表现，但是它是不兼容 IE 浏览器的。相比于axios，它无法获取文件上传的进度，也无法直接设置接口请求过期时间。在无法下载依赖的场景下，使用fetch()方法要比使用更加便捷，使得代码更加简洁。
django使用fetch上传文件
HGGshiwo的博客
05-29 498
在上一篇文章中，我包装了fetch方法，使其携带cookie。${这里还是选择使用formData进行传递数据，一是django可以从POST.get(key)直接获取参数，如果是浅层的就不需要额外json.parse 了，二是json传输文件需要base64，可能有性能损失。
JS 封装fetch 上传文件+返回json+返回文件流
菜鸟记录
05-30 2858
⏹封装fetch,实现上传文件+返回json+返回文件流功能
fetch上传文件
11-06 162
通过简单的配置，实现form表单文件上传 var formData = new FormData(); var fileField = document.querySelector("input[type='file']"); formData.append('username', 'abc123'); formData.append('avatar', fileFiel...
详解使用fetch发送post请求时的参数处理
08-30
然而，与使用`XMLHttpRequest`不同，`fetch`在处理POST请求时，特别是在设置参数方面有一些特殊的注意事项。本文将深入探讨如何使用`fetch`发送POST请求，并处理相关的参数。 首先，让我们明确一个关键点：`fetch`...
Post方式上传文件
08-07
在IT行业中，网络请求是应用程序与服务器交互的重要方式，而POST请求是其中最常见的一种，尤其在处理数据提交和文件上传时。本实例主要聚焦于使用POST方式上传文件，这在移动应用、网页表单或者后台接口开发中非常...
vue使用fetch post 方法500错误页面 Cannot read property ‘*‘ of undefined
qq_38192709的博客
11-23 1365
问题描述：vue 里面使用 fetch.post 方法报 500 错误 服务端： 客户端： 结果： 有500错误的页面。 解决方法： 在使用方法前，添加上 bodyParser ，因为 req.body.id 中的 body 是从这 bodyParser 来的。 添加之后： ...
http模拟POST表单上传文件
01-24
在本文中，我们将深入探讨如何通过模拟POST表单上传文件到服务器，这是一项常见的任务，尤其在开发Web应用程序时。我们将涵盖客户端如何构建请求以及服务器如何接收和处理这些请求。 首先，让我们理解POST请求的...
javascript使用fetch上传下载文件操作
qq_33183759的博客
07-06 2447
备注fetch兼容性：https://www.cnblogs.com/lhyxq/p/9779076.html。// 参数 下载url、上传url、文件名称、文件类型。// 参数 下载url、文件名称、文件URL。// 参数 下载url、文件名称。
fetch 实现文件上传
weixin_30904593的博客
02-26 2762
摘要 这次实现补了好几个以前遗漏的点 1. form 表单 type=file 的 input 提交的file是固定类型的对象 包括 file 多个属性 2. 手动如何拼接 form data 拼接的时候尝试用 file reader 获取到的二进制手动创造 File 对象，失败... 对比发现和前台获取的file 对象缺失很多属性，比如name、lastModified 、type 等等。尝试...
fetch + Node 实现本地文件上传并预览
haogemr的博客
07-07 567
fetch + Node 实现本地文件上传并预览
踩坑：fetch上传formData文件。 无需额外增加headers、浏览器会自动根据文件加上headers 生成boundary
Xpy 的博客
11-24 3332
一、场景 想要实现的效果：获取到图片本地内容后，通过 fetch 来上传 formData 格式数据。 二、遇到的问题 有问题的请求： function request(params){ const { api, data } = params; const url = window.location.origin + api; return fetch(url,{ method:"POST", headers:{ 'Content-Type': 'multipart/fo
React中使用fetch实现文件上传下载
weixin_33897722的博客
11-18 1986
在最近的项目中需要实现文件上传下载功能，在以前spring、jsp的项目中实现文件上传很简单，但现在前后端分离，前端使用React，后端使用Spring Boot，实现就没那么方便了。 前端React使用fetch而非传统的XMLHttpRequest从后端获取Json数据，那么文件上传自然而然也要使用fetch了。 在react中使用fetch上传文件不难，代码如下： <input typ...
封装fetch（post请求）下载文件的方法
qq_28666545的博客
02-27 2419
## why 采用get方法时较为简单，但是涉及到传参较多时，要求我封装一个采用post下载文件的方法 ## how 原生方法实现 ```jsx //触发方法下载后         const params = [new Date(),new Date(),new Date(),new Date()];         var url = 'http://localhost:8080/api/f...
fetch使用formData格式的请求上传图片时
weixin_48911985的博客
03-15 351
headers Content-type不要设置；会自动识别成multipart/form-data;
Fetch下的PUT文件上传
躁动de气球
01-13 7023
浏览器中常见的文件上传方式(POST)由于form表单仅支持GET和POST两种请求模式,过往常见的文件上传方式使用的是POST。具体的用法是给form表单设置 enctype=“multipart/form-data”（体现 在请求头Content-Type中）。 这种方式下文件内容被加工后封装在请求体里，通过特定的字符串（也记录在请求头Content-Type中）分隔开请求参数和文件内容，服务
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值