上传 JSON 数据

使用fetch()来发布json编码的数据。

var url = 'https://example.com/profile';
var data = {username: 'example'}; fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上传文件

可以使用HTML<input type="file" />输入元素、FormData()和fetch()上传文件。

var formData = new FormData();
var fileField = document.querySelector("input[type='file']"); formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]); fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上传多个文件

可以使用HTML<input type="file" />输入元素、FormData()和fetch()上传文件。

var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]"); formData.append('title', 'My Vegas Vacation');
formData.append('photos', photos.files); fetch('https://example.com/posts', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

Rewrite JSON project with Fetch的更多相关文章

  1. Rewrite JSON with Fetch

    1.重写json请求部分:HTML文件代码如下:<html>......<script> var myList = document.querySelector(‘ul‘); ...

  2. Using Fetch to rewrite JSON

    截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  3. Rewrite json

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. Fetch:下一代 Ajax 技术

    Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...

  5. 这个东西,写C++插件的可以用到。 RapidJSON —— C++ 快速 JSON 解析器和生成器

    点这里 原文: RapidJSON —— C++ 快速 JSON 解析器和生成器 时间 2015-04-05 07:33:33  开源中国新闻原文  http://www.oschina.net/p/ ...

  6. fetch简明学习

    前面的话 Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网 ...

  7. angular-cli.json常见配置

    { "project": { "name": "ng-admin", //项目名称 "ejected": false / ...

  8. angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

    一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 &quo ...

  9. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

随机推荐

  1. 【Selenium】各浏览器(firefox,chrome,ie)驱动下载地址汇总

    前两天使用Selenium分布式时,总抛出异常.更新成最新驱动可以解决.其中chrome异常如下, "platform": "WINDOWS" File &qu ...

  2. ORA-01466: 无法读取数据 - 表定义已更改

    前几天同事同事误删除数据,经查询发现数据在7:13分时候还是全量 628W行: 于是他将现在的表复制了个备份,其中有数据200W: 于是为了省事,想要直接闪回全表,就把这个表truncate了.... ...

  3. Linux查看显示编辑文本文件

    1:cat -bash-4.1$ cat --help 用法:cat [选项]... [文件]... 将[文件]或标准输入组合输出到标准输出. -A, --show-all           等于- ...

  4. mac下Android开发环境的配置

    近似一天的时间,终于把Android环境配置好了. 总结:主要问题在于android的网站是国外,下载东西的时候需要vpn才可以.所以会出现各种各样的问题. 环境:Android Studio + S ...

  5. 关于kafka生产者相关监控指标的理解(未解决)

    关于生产者相关的监控指标含义的理解,希望大神帮忙进行确定下.     这边找了官网,看了网上各样的资料,但都无法帮我理解监控项目相关含义.     相关的监控项目是从jconsole获取的,并接入到了 ...

  6. java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'

    今天在跑项目时遇到java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'报错,自己也是摸索了很久,一 ...

  7. Java 批量修改文件夹里面的文件的名字

    背景:公司要求使用PADS完成原理图设计.PCB Layout.而他硬件工程师要求我在将PADS的库文件发送给他们之前,必须在每一个库文件的后面追加今天的日期,再发送给他们. 问题来了,如果一次需要发 ...

  8. linux命令详解之df命令

    df命令概述df命令作用是列出文件系统的整体磁盘空间使用情况.可以用来查看磁盘已被使用多少空间和还剩余多少空间. df命令显示系统中包含每个文件名参数的磁盘使用情况,如果没有文件名参数,则显示所有当前 ...

  9. ***微信小程序学习文档和资料归档收集

    微信小程序官方文档: https://cloud.tencent.com/document/product/619 小程序培训视频教程: https://xw.qq.com/edu/201805140 ...

  10. 在SOUI中使用动态多语言切换

    动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...