fetch-api 相关问题

我仍在努力解决这个问题。我可以让用户通过文件输入选择文件（甚至多个）：选择要上传的文件我仍在努力解决这个问题。我可以让用户通过文件输入选择文件（甚至多个）： <form> <div> <label>Select file to upload</label> <input type="file"> </div> <button type="submit">Convert</button> </form> 我可以使用 submit 捕获 <fill in your event handler here> 事件。但是一旦我这样做了，如何使用 fetch 发送文件？ fetch('/files', { method: 'post', // what goes here? What is the "body" for this? content-type header? }).then(/* whatever */); 我是这样做的： var input = document.querySelector('input[type="file"]') var data = new FormData() data.append('file', input.files[0]) data.append('user', 'hubot') fetch('/avatars', { method: 'POST', body: data }) 这是一个带注释的基本示例。 upload 功能正是您所寻找的： // Select your input type file and store it in a variable const input = document.getElementById('fileinput'); // This will upload the file after having read it const upload = (file) => { fetch('http://www.example.net', { // Your POST endpoint method: 'POST', headers: { // Content-Type may need to be completely **omitted** // or you may need something "Content-Type": "You will perhaps need to define a content-type here" }, body: file // This is your file object }).then( response => response.json() // if the response is a JSON object ).then( success => console.log(success) // Handle the success response object ).catch( error => console.log(error) // Handle the error response object ); }; // Event handler executed when a file is selected const onSelectFile = () => upload(input.files[0]); // Add a listener on your input // It will be triggered when a file will be selected input.addEventListener('change', onSelectFile, false); 使用 Fetch API 发送文件的重要注意事项需要省略 Fetch 请求的 content-type 标头。然后浏览器会自动添加 Content type 标题，包括表单边界，如下所示 Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD 表单边界是表单数据的分隔符如果你想要多个文件，你可以使用这个 var input = document.querySelector('input[type="file"]') var data = new FormData() for (const file of input.files) { data.append('files',file,file.name) } fetch('/avatars', { method: 'POST', body: data }) 要提交单个文件，您可以直接使用 File 的 input 数组中的 .files 对象直接作为 body: 初始化程序中 fetch() 的值： const myInput = document.getElementById('my-input'); // Later, perhaps in a form 'submit' handler or the input's 'change' handler: fetch('https://example.com/some_endpoint', { method: 'POST', body: myInput.files[0], }); 这是有效的，因为 File 继承自 Blob，并且 Blob 是 Fetch 标准中定义的允许的 BodyInit 类型之一。这里接受的答案有点过时了。截至 2020 年 4 月，MDN 网站上看到的推荐方法建议使用 FormData，并且不要求设置内容类型。 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 为了方便起见，我引用了代码片段： const formData = new FormData(); const 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()) .then((result) => { console.log('Success:', result); }) .catch((error) => { console.error('Error:', error); }); 如果能添加 php 端点示例就更好了。这就是 js: const uploadinput = document.querySelector('#uploadinputid'); const uploadBtn = document.querySelector('#uploadBtnid'); uploadBtn.addEventListener('click',uploadFile); async function uploadFile(){ const formData = new FormData(); formData.append('nameusedinFormData',uploadinput.files[0]); try{ const response = await fetch('server.php',{ method:'POST', body:formData } ); const result = await response.json(); console.log(result); }catch(e){ console.log(e); } } 那就是 php: $file = $_FILES['nameusedinFormData']; $temp = $file['tmp_name']; $target_file = './targetfilename.jpg'; move_uploaded_file($_FILES["image"]["tmp_name"], $target_file); 从 Alex Montoya 的多文件输入元素方法中跳出来 const inputFiles = document.querySelectorAll('input[type="file"]'); const formData = new FormData(); for (const file of inputFiles) { formData.append(file.name, file.files[0]); } fetch(url, { method: 'POST', body: formData }) 我的问题是我使用response.blob()来填充表单数据。显然你至少不能用 React Native 做到这一点，所以我最终使用了 data.append('fileData', { uri : pickerResponse.uri, type: pickerResponse.type, name: pickerResponse.fileName }); Fetch 似乎可以识别该格式并将文件发送到 uri 指向的位置。这是我的代码： html: const upload = (file) => { console.log(file); fetch('http://localhost:8080/files/uploadFile', { method: 'POST', // headers: { // //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'", // "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" // ή // multipart/form-data // }, body: file // This is your file object }).then( response => response.json() // if the response is a JSON object ).then( success => console.log(success) // Handle the success response object ).catch( error => console.log(error) // Handle the error response object ); //cvForm.submit(); }; const onSelectFile = () => upload(uploadCvInput.files[0]); uploadCvInput.addEventListener('change', onSelectFile, false); <form id="cv_form" style="display: none;" enctype="multipart/form-data"> <input id="uploadCV" type="file" name="file"/> <button type="submit" id="upload_btn">upload</button> </form> <ul class="dropdown-menu"> <li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li> <li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li> </ul> 如何使用 HTML5 选择上传单个文件fetch <label role="button"> Upload a picture <input accept="image/*" type="file" hidden /> </label> const input = document.querySelector(`input[type="file"]`); function upload() { fetch(uploadURL, { method: "PUT", body: input.files[0] }); } input.addEventListener("change", upload);

javascript fetch-api

回答 11 投票 0

使用 javascript fetch 调用后端 url 时无法在 django 视图中 render()

我正在使用 javascript 进行表单验证，并且使用 fetch 后端调用后端 api 由 django 处理，然后 api 关联的视图正在渲染具有某些上下文的页面，但是...

javascript validation django-views fetch-api render

回答 1 投票 0

Fetch API 仅将未定义的内容加载到表中

刚接触 JS，正在课堂上做一个项目。我们正在与 pokeAPI 网站合作，将所有神奇宝贝加载到具有正确 API url 的表中。我以为我走在正确的道路上，但是

javascript fetch-api

回答 1 投票 0

使用不记名令牌获取API返回401

我是 React 新手。我正在我的全栈项目中试验 Fetch API，在下面我放置了我的 fetch 代码 const bearerToken = "承载者" + 令牌 const fetchDataGet = async () => { ...

javascript reactjs fetch-api

回答 1 投票 0

Fetch 和 setInterval 反应钩子问题

我最近使用 React 的钩子从服务器获取数据，但我遇到了钩子的问题。代码看起来是正确的，但看起来 useEffect 不是第一次调用，而是 3 秒后......

reactjs typescript react-hooks fetch-api setinterval

回答 2 投票 0

如何减少 Javascript 获取请求的下载时间？

我遇到了长获取请求的问题，这会减慢我的代码速度。我正在尝试构建一个在 www.amazon.com 之上工作的 google chrome 扩展程序，并包括对其他亚马逊网站的获取请求...

javascript fetch-api

回答 1 投票 0

获取请求未从使用 App Router 在不同端口上的本地主机上运行的 Express API 中提取

我一整天都在尝试（未成功）尝试对我的后端 API 进行 fetch 调用。这是我的 page.js：导出默认异步函数 Page() { //const 响应=await fetch('htt...

mongodb express next.js localhost fetch-api

回答 1 投票 0

如何在 React Native 中将数据提取到我的数据表中

我想将数据提取到我的数据表中我收到此错误： index.js:1 警告：函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者我...

javascript reactjs react-native fetch-api

回答 1 投票 0

react-native fetch 中的“then(res => res.json())”是什么意思？ [重复]

react-native fetch 下面的代码片段中的 then(res => res.json()) 是什么意思？获取（网址） .then(res => res.json()) .then(res => { this.setState({ 数据：...

javascript react-native jsx fetch-api

回答 3 投票 0

Fetch API 响应代码与网络选项卡响应代码不同

我正在创建一个 React 组件，该组件旨在根据页面是否被缓存来检查隐私策略页面的更新。我有两个问题 - 响应显示的响应代码

javascript reactjs fetch-api

回答 2 投票 0

API 获取函数中的数据变量在声明时不起作用

我对 js 非常陌生，我已经必须使用 API 并使用 async/await 所以我知道可能有些东西我在这里不明白...... 这是我的代码：异步函数collectWorks() { 常量响应...

javascript async-await fetch-api

回答 1 投票 0

无法从 tmdb javaScript 获取数据

我正在尝试仅使用 tmdb api、JavaScript、css 和 html 构建一个电影网站。我尝试执行搜索查询并显示结果，但问题是结果不显示。调试时...

javascript promise fetch-api

回答 2 投票 0

坚持 JavaScript 逻辑，以便使用获取和修改参数正确循环 JSON 对象

我有一个包含以下数据的 JSON 文件： [ { “名称”：“比特币（BTC）”， “url”：“https://openapiv1.coinstats.app/coins/bitcoin”， ...

javascript json fetch-api astro

回答 1 投票 0

类型错误：无法在窗口上执行提取。名字无效

我正在尝试通过网络选项卡访问 twitter 的 graphql api（显然位于同一来源）这是我当前的实现： // POST 方法实现示例：异步函数 getData(用户名, ...

javascript twitter graphql request fetch-api

回答 1 投票 0

Chrome 在使用流时拒绝使用 HTTP/2 获取上传

目前正在尝试创建一个简单的文件上传应用程序，我使用 S3 作为存储并使用 presigned-url 从客户端进行上传。该应用程序是使用 SvelteKit 构建的，并使用 ...

javascript google-chrome http fetch-api

回答 1 投票 0

fetch-api 相关问题

最新问题