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,但是这并不影响接口业务。

目录
相关文章
|
2月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
121 0
|
2月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
51 0
|
2月前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
11天前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
18 2
|
11天前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
44 1
|
2月前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
66 0
|
2月前
|
移动开发 小程序 iOS开发
uniapp组件库fullScreen 压窗屏的适用方法
uniapp组件库fullScreen 压窗屏的适用方法
65 1
|
2月前
|
JavaScript API
uniapp中路由拦截方法
uniapp中路由拦截方法
|
2月前
|
小程序 Android开发
uniapp进行条件编译的两种方法
uniapp进行条件编译的两种方法
84 0
|
2月前
|
前端开发
uniapp去除滚动条的方法
uniapp去除滚动条的方法