search
HomeWeb Front-endJS TutorialHow Native uses fetch to implement image upload function

This time I will show you how Native uses fetch to implement the image upload function. What are the precautions for Native to use fetch to implement the image upload function. The following is a practical case. , let’s take a look.

Normal networkRequest parameter is a JSON object

The request parameters for image upload use the formData object

Use fetch to upload the image code encapsulation as follows:

let common_url = 'http://192.168.1.1:8080/'; //服务器地址
let token = '';  //用户登陆后返回的token
/** 
 * 使用fetch实现图片上传
 * @param {string} url 接口地址
 * @param {JSON} params body的请求参数
 * @return 返回Promise 
 */
function uploadImage(url,params){
  return new Promise(function (resolve, reject) {
    let formData = new FormData();
    for (var key in params){
      formData.append(key, params[key]);
    }
    let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
    formData.append("file", file);
    fetch(common_url + url, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;charset=utf-8',
        "x-access-token": token,
      },
      body: formData,
    }).then((response) => response.json())
      .then((responseData)=> {
        console.log('uploadImage', responseData);
        resolve(responseData);
      })
      .catch((err)=> {
        console.log('err', err);
        reject(err);
      });
  });
}

Usage

let params = {
  userId:'abc12345',  //用户id
  path:'file:///storage/emulated/0/Pictures/image.jpg'  //本地文件地址
}
uploadImage('app/uploadFile',params )
  .then( res=>{
    //请求成功
    if(res.header.statusCode == 'success'){
      //这里设定服务器返回的header中statusCode为success时数据返回成功
      upLoadImgUrl = res.body.imgurl; //服务器返回的地址
    }else{
       //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
      console.log(res.header.msgArray[0].desc);
    }
  }).catch( err=>{ 
     //请求失败
  })

Note: Due to different background server configurations,
let file = {uri: params.path, type: 'application/octet-stream', name: ' The type in image.jpg'} may also be multipart/form-data
The file field in formData.append("file", file) may also be images ​​​​​

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How js implements A-Z sorting of Chinese Pinyin

vue.js moves the array position and updates it in real time View

#Vue handles the array page through the following table and does not render

The above is the detailed content of How Native uses fetch to implement image upload function. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
在Vue应用中使用axios时出现“TypeError: Failed to fetch”怎么办?在Vue应用中使用axios时出现“TypeError: Failed to fetch”怎么办?Jun 24, 2023 pm 11:03 PM

最近,在使用Vue应用开发过程中,我遇到了一个常见的问题:“TypeError:Failedtofetch”错误提示。这个问题出现在使用axios进行HTTP请求时,后端服务器没有正确响应请求时发生。这种错误提示通常表明请求无法到达服务器,可能是由于网络原因或服务器未响应造成的。出现这个错误提示后,我们应该怎么办呢?以下是一些解决方法:检查网络连接由于

如何在PHP中实现SEO优化如何在PHP中实现SEO优化May 20, 2023 pm 01:30 PM

随着互联网的发展,SEO(SearchEngineOptimization,搜索引擎优化)已经成为了网站优化的重要一环。如果您想要使您的PHP网站在搜索引擎中获得更高的排名,就需要对SEO的内容有一定的了解了。本文将会介绍如何在PHP中实现SEO优化,内容包括网站结构优化、网页内容优化、外部链接优化,以及其他相关的优化技巧。一、网站结构优化网站结构对于S

Java中Native修饰符的使用方法Java中Native修饰符的使用方法Apr 22, 2023 pm 03:46 PM

Native修饰符的使用native主要用于方法上1、一个native方法就是一个Java调用非Java代码的接口。一个native方法是指该方法的实现由非Java语言实现,比如用C或C++实现。2、在定义一个native方法时,并不提供实现体(比较像定义一个JavaInterface),因为其实现体是由非Java语言在外面实现的。说明Java语言本身不能对操作系统底层进行访问和操作,但是可以通过JNI接口调用其他语言来实现对底层的访问。JNI是Java本机接口(JavaNativeInterf

如何在PHP中实现ERP系统如何在PHP中实现ERP系统May 20, 2023 pm 06:21 PM

随着电子商务和企业管理的发展,许多企业开始寻找更好的方法来处理其日常业务流程。ERP系统是一种能够整合企业各种业务流程的软件工具。它提供了全面的功能,包括生产、销售、采购、库存、财务等方面,帮助企业提高效率、控制成本和提高客户满意度。而在PHP编程语言中,也能够实现ERP系统,这就需要我们掌握一些基本的知识和技术。下面,我们将深入探讨如何在PHP中实现ERP

如何在PHP中实现CRM系统如何在PHP中实现CRM系统May 20, 2023 pm 12:31 PM

随着企业的发展,客户管理变得越来越重要。为了提高客户满意度和忠诚度,越来越多的企业采用客户关系管理系统(CRM)来帮助其管理客户关系。而PHP是一种流行的编程语言,因其简单易学、灵活和强大而被广泛应用于Web开发。那么,如何在PHP中实现CRM系统呢?本文将为您介绍实现CRM系统的步骤和技巧。Step1:需求分析在开始开发CRM系统之前,您需要进行需求分析

在PHP中如何实现物联网开发?在PHP中如何实现物联网开发?May 12, 2023 am 11:51 AM

随着物联网技术的发展和普及,越来越多的应用场景需要使用PHP语言进行物联网开发。PHP作为一种广泛应用于Web开发的脚本语言,它的易学易用、开发速度快、可扩展性强等特点,使其成为开发物联网应用的一种优秀选择。本文将介绍在PHP中实现物联网开发的常用技术和方法。一、传输协议和数据格式物联网设备通常使用TCP/IP或UDP协议进行数据传输,而HTTP协议是一个优

Vue项目开发中的数据请求与处理经验Vue项目开发中的数据请求与处理经验Nov 02, 2023 am 10:35 AM

在Vue项目开发中,数据请求与处理是非常重要的环节。一个好的数据请求与处理策略可以大大提高应用的性能和用户体验。本文将分享一些在Vue项目开发中的数据请求与处理的经验。合理使用Axios库Axios是一个常用的基于Promise的HTTP库,用于发送XHR请求。在Vue项目中,可以使用Axios来发送数据请求。在使用Axios时,需要注意以下几点:合理配置A

如何在PHP中实现验证码如何在PHP中实现验证码May 20, 2023 am 11:31 AM

随着互联网的不断发展,越来越多的网站需要使用验证码来保证安全性。验证码是一种借助人类能力而无法被计算机破解的认证技术,广泛应用于网站注册、登录、找回密码等功能中。下面将介绍如何使用PHP实现验证码功能。一、生成验证码图片验证码图片的生成是验证码功能的核心,需要生成一个随机字符,并将其渲染为图像展示给用户。在PHP中,可以使用GD库来生成图片。GD库是一种用于

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)