上传 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. JMM以及并发三大特性介绍(包括解决方案)

    JMM结构图: JMM对同步的8种操作: JMM的同步规则: Countdownlatch介绍: 该类功能是可以阻塞线程,并在保证线程满足特定条件下,继续执行.如上图,Countdownlatch的c ...

  2. 定时-thinkphp

    链接:https://pan.baidu.com/s/1wHayb9fYOiiMB3Scms0iRQ 提取码:51ex 复制这段内容后打开百度网盘手机App,操作更方便哦

  3. starting Tomcat v8.5 at localhost has encountered a problem

    好像有很多初学者会遇到这个问题 我也遇到这个问题了, 我的问题在于:

  4. centos上网络服务起不来network.service failed

    前言:今天在开虚拟机,额,,,crt连不上虚拟机了,ping不通,说明虚拟机网卡挂了,去后台看下 发现报错: Job for network.service failed because the  c ...

  5. RabbitMQ开启服务却无法登录

    我之前无聊之际修改了我的电脑名,后来发现我的rabbitmq服务无法开启,后来我又把电脑名改回去了还是不行,我从网上看了很多教程都没有成功,后来看到了这个方法,出处忘记了,不好意思,发出来记忆一下 包 ...

  6. javascript 总结(常用工具类的封装)

    1. type 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'Strin ...

  7. DevExpress控件库 开发使用经验总结3 制作项目安装包

    2015-01-27 使用DevExpress控件包开发C/S项目完成后,部署前需要制作本地安装包.本文还是使用“SetupFactory”安装工厂来制作安装包.在以前的系列文章中详细介绍过该工具的使 ...

  8. Redis持久化persistence

    一.前言 由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁盘上,当redis重启后,可以从磁盘中恢复数据. R ...

  9. Linux从入门到进阶全集——【第十四集:Shell编程】

    正则表达式(与通配符) 正则表达式:匹配字符串,属于包含匹配[只要包含匹配条件就行],grep,awk,sed等命令支持正则表达式 通配符(*,?,[]):匹配文件名,属于完全匹配[必须是完全匹配条件 ...

  10. Candies POJ - 3159 (最短路+差分约束)

    During the kindergarten days, flymouse was the monitor of his class. Occasionally the head-teacher b ...