Angular9 使用FormData同时上传文件和其他参数

最新推荐文章于 2023-02-14 14:12:31 发布
最新推荐文章于 2023-02-14 14:12:31 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Angular9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33885702/article/details/105167103
版权

Angular9 怎么把文件上传给后端接口：没有感情的搬运工

重点来了！！，如果你想要同时上传文件和一些文本，

  1. 不要自己设置Content-Type
headers:{
    "Content-Type":"multipart/form-data" //把这个去掉！！！
},
  1. 很坑的是我把python flask后端和Angular(ng serve)同时起在本地访问是200，放内网的服务器上通过一个跳板机就400 Bad Request了，关键这玩意儿把日志打在了nginx的error log里面，我这种菜鸡怎么知道是不是nginx的错，最后试了高赞评论里的一个评论成功了233
    把自己的文本参数转成json字符串JSON.stringify()

Angular国内资料太少了又不会爬墙，如果试了不行的话那就只能祝你好运了。。我反正是坑里面呆了2天已经疯了

叫什么名字好了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs和jquery前端发送以http请求formdata数据
wuya1994的博客
12-01 6016
formdata是比较常见的前端发送给后端的请求，不仅可以上传数据，而且同时可以上传文件。 jquery使用http请求上传formdata数据的方法： var formdata = new FormData(); formdata.append('key', 'value'); formdata.append('键', '这边需要是string，不要写json
angularJs2 formData 传有附件的请求
sqlpeng的博客
10-01 2326
最近项目中
angular发form-data请求方式
weixin_42545165的博客
10-18 2680
angular发form-data请求方式 代码如下: const formData = new FormData(); formData.append( 'client_id', 'Clt' ); formData.append( 'clieecret', 'gSu' ); formData.append( 'granpe', 'pasrd'); formData...
Angular文件上传
weixin_39407291的博客
10-23 1656
一、 使用FormData异步提交 常用的表单提交编码方式有两种：multipart/form-data 和 application/x-www-form-urlencoded，如果是html页面中的form表单上传，可以使用enctype来指定编码方式，不指定时默认是后者。 文件上传必须使用multipart/form-data编码方式的表单post提交，而如果需要异步上传文件，则要使用Form...
Angular 使用 formData 上传文件到后台
SuperRich 的博客
05-07 2405
导入需要的包体 import {Observable} from 'rxjs'; import {HttpClient, HttpRequest, HttpResponse} from '@angular/common/http'; import {filter} from "rxjs/operators"; 上传文件的请求方法 // 上传图片或文件到后台接口 doUpload (file: F...
angular2通过formdata图片上传
03-22 511
图片上传是我目前在angular2中遇到的最棘手的问题 虽然图片上传的实现就是文件上传，一路辗转试过ng2-file-upload和ng2-image-upload的使用 但是由于项目的开发是前后端分离的，所以最后都死在了跨域问题上（可能我学得不够深不会处理） 在怼了快一个月的绝望之后在另一位大大的代码下下解决了这个问题 这一部分除了图片其他如视频音乐也能通过修改完成上传和预览 ...
AngularJS FormData多部分文件上传
04-05
本教程将深入探讨如何使用AngularJS结合FormData对象进行多部分文件上传。 **AngularJS 和 FormData** AngularJS 提供了 ngModel 指令，它允许我们双向绑定HTML表单元素到应用的数据模型。FormData 是一个HTML5...
angular上传图片
07-30
这个压缩包文件"angularjs实现上传图片"提供了一个示例，帮助我们理解如何在Angular项目中处理图片上传和预览。接下来，我们将深入探讨Angular中图片上传的实现方式。 Angular是一个强大的前端开发框架，它提供了...
AngularJS上传文件的示例代码
12-11
以上就是使用AngularJS上传文件的基本流程，包括了单独上传文件和上传文件时附带其他参数。在实际开发中，还需要考虑错误处理、文件大小限制、文件类型检查以及安全问题，例如防止跨站脚本攻击(XSS)和跨站请求伪造...
angular发送multipart/form-data文件的方法
hefeng
12-15 1831
var fd = new FormData(); fd.append('file',fileInput.files[0]); $http.post("service/...",fd, { transformRequest: angular.identity, headers: {'Content-Type': undefined}
【使用multipart/form-data方式传递MultipartFile参数，实现服务间文件的传递】
weixin_43202160的博客
02-14 6830
使用multipart/form-data方式传递MultipartFile参数，实现服务间文件的传递
angularjs用FormData上传文件
weixin_34096182的博客
03-03 488
2019独角兽企业重金招聘Python工程师标准>>> ...
html multipart/form-data,【Web前端问题】请求的contentType需要multipart/form-data，怎么转换？...
weixin_33754535的博客
06-19 582
请求时根据控制台来看，contentType是text/plain，而我需要multipart/form-data类型请问怎么转换呢？html：*ID：保存js：$scope.processForm = function(){var data = $scope.data,url = Api.add,config;$http({method: 'POST',url: url,data: data,h...
在AngularJS中以相同的请求处理上传文件和JSON格式数据
飞鹰的专栏
08-24 2359
原文出处：http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/ 我决定写一遍快速介绍这方面的文章，因为很多关于这方面的文档或例子都太片面了。通过这篇文章，我们将学会实现用同样的请求处理来上传任意数量的文件和其他任意格式的数据。这个例子我们会上传一些Json格式的数据
[Angular2+]POST/formData/XMLHttpRequest/获取responseText/Promise
对未知的一切抱有热忱
03-22 562
angular怎么发送formData 怎么写原生的xhr 写了xhr发现是异步的取不到返回值怎么办 解决方法：用Promise包装，把返回值resolve即可 sendPost(url) { const xhr = new XMLHttpRequest(); const data = JSON.stringify(this.buildPostData()) r...
Angular+Boostrap-fileinput+formdata上传图片（前端代码）
PigBiBiX的博客
07-18 1935
1、先布置好前端界面的代码       HTML代码： fileinput * 上传图片: 图片后缀名必须为png、jpg、gif,文件小于2M JavaScript代码： $("#inputPic").fileinput({ language: 'zh', //设置语言 allowedPrev
angular form Multipart/form-data 上传图片
lianxin19900610的博客
07-10 1400
$scope.save = function() { var fd = new FormData(); var file = document.querySelector('input[type=file]').files[0]; fd.append('logo', file); $http({ ...
angular 取项目外文件参数
最新发布
05-12
如果你想在 Angular 项目中读取外部文件的参数，可以使用 Angular 的 HttpClient 来读取本地 JSON 文件。以下是一个示例代码： 1. 在项目根目录下创建一个名为 `config.json` 的文件，里面包含参数： ```json { "apiUrl": "http://localhost:3000/api", "apiKey": "1234567890" } ``` 2. 创建一个名为 `config.service.ts` 的服务，并注入 HttpClient： ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ConfigService { private configUrl = 'assets/config.json'; constructor(private http: HttpClient) { } getConfig() { return this.http.get(this.configUrl); } } ``` 3. 在需要使用参数的组件中，注入 `ConfigService` 并调用 `getConfig()` 方法： ```typescript import { Component, OnInit } from '@angular/core'; import { ConfigService } from './config.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { apiUrl: string; apiKey: string; constructor(private configService: ConfigService) {} ngOnInit() { this.configService.getConfig().subscribe((data: any) => { this.apiUrl = data.apiUrl; this.apiKey = data.apiKey; }); } } ``` 4. 在 HTML 中使用参数： ```html <p>API URL: {{ apiUrl }}</p> <p>API Key: {{ apiKey }}</p> ``` 这样，你就可以在 Angular 项目中读取外部文件的参数了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值