react-native实现文件上传

前言

最近项目有新的需求,做一个类似朋友圈的功能。其中发布动态时就涉及到了图片的上传。

实现

## 1.所用的API ##
采用HTML5提供的formData和网络框架axios实现
## 2.具体代码 ##
// 创建一个formData(虚拟表单)
const formData = new FormData(); 
// 需要上传的文件
const file = { uri: fileUri, type: 'multipart/form-data', name: filenAME };   // 这里的key(uri和type和name)不能改变,
formData.append('file', file);   // 这里的files就是后台需要的key

此时含有待上传文件的虚拟表单就创建好了。接下来就是上传文件了

// 请求头文件
const config = {
    Accept: 'Application/json',
    'Content-Type': 'multipart/form-data',
  };

// 使用post上传文件(httpuri为文件上传的地址)
await axios.post(httpuri, formData, config)
    .then((response) => {
      // 上传成功
    }).catch((e) => {
      // 上传失败
    });

整个上传过程就完成了。其实还是很简单的

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值