uniapp发送formdata表单请求(全网最简单方法)

简介: 因为uniapp不支持直接传输formdata,只提供了uploadFile方法上传文件,但是利用该方法就可以传输formdata了。

因为uniapp不支持直接传输formdata,只提供了uploadFile方法上传文件,但是利用该方法就可以传输formdata了。


第一种:

可以直接使用filePath属性进行空文件传输,只需要设置filePath为空就行了。

function $uploadForm(url, data, filePath=''){
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      header: {
        "Authorization": $getToken()
      },
      url: url,
      timeout: 1000*6,
      filePath,
      formData: data,
      success: (res) => {
      },
      complete: () => {
      },
      fail: (res) => {
      }
    })
  })
}


调用时,data是个对象即可。

this.$uploadForm(`/xxx`,{xxx:xxx}).then(res=>{})


第二种

使用file属性,无需选择文件,我们自己new个文件即可。


1、封装的上传方法

function $uploadFile(url, file, fileName='file', data){
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      header: {
      },
      url: url,
      timeout: 1000*6,
      file: file,
      name: fileName,
      formData: data,
      success: (res) => {
      },
      complete: () => {
      },
      fail: (res) => {
      }
    })
  })
}


2、提交formdata

this.$uploadFile(this.testForm.url
          ,new window.File([new Blob()],'a.txt')
          ,'file'
          , JSON.parse(this.testForm.data)).then(res=>{})


测试结果d36730dc34c24339bc352505a959b6e2.png


结尾

通过以上两种方式就能使用uniapp以表单方式提交数据了,虽然多传个file,但是这并不影响接口业务。

目录
相关文章
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
432 0
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
158 0
|
1月前
|
前端开发 API UED
封装 uniapp 请求库的最佳实践
背景 在前端开发中,HTTP 请求是与服务器进行数据交互的核心手段。无论是获取数据还是提交数据,前端应用几乎都离不开 HTTP 请求。在 uniapp 中,uni.request 是官方提供的用于发起 HTTP 请求的基础 API。然而,直接使用 uni.request 存在一些问题和不足,比如: 1. 代码冗余:每次发起请求时都需要编写类似的配置代码,导致代码重复。 2. 缺乏统一管理:没有统一的地方管理请求参数、头信息、错误处理等,使得代码不易维护
66 7
|
3月前
|
iOS开发 开发者 Windows
uniapp云打包ios应用证书的获取方法,生成指南
打包用到的一共两个文件,一个是p12格式的私钥证书,一个是证书profile文件。其中生成p12证书的时候,按照官网的教程,是需要MAC电脑来协助做的,主要是生成一些csr文件和导出p12证书等。其实这些步骤也可以借助一些其他的工具来实现,不一定使用mac电脑,用windows电脑也可以创建。
312 0
|
5月前
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
278 3
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
236 2
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
8月前
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
136 5
|
11月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
348 2
|
11月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
1053 1
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
652 0

热门文章

最新文章