uni-app 实现input:type=file 上传,并实现表单提交

问题描述

最近在做一个把现有app转成H5的项目，需上传且表单提交，遇到如下问题：

1.关于上传图片的功能，服务端并未提供上传文件接口。（无接口无法使用官方上传api且uni-app的input type有效值只有4个（text,number,idcard,digit），并无type=file）。

2.保存接口需要上传文件与其他信息通过表单提交。（表单提交简单我们前端提交formData数据就好了）。

3.提交时要明白js是无法将file类型转为表单提交时file对应的(binary)类型的。

以上3点就决定了uni-app 官方提供的上传api是无法满足当前场景的。

解决方案

1.页面渲染完毕后，动态创建一个input：type=file的DOM元素

2.提交时，new一个FormData，将需要的值都append到这个formData实例中

3.将这个FormData实例作为参数提交

详细代码

1.关于动态创建input的时间节点，无论选择何时，必须是页面渲染完毕之后，我选择的是，点击上传后创建。

<!--template中-->
<text ref="input" class="upFile" @click="upload()"></text>
<!--methods中-->
upload(){var input = document.createElement('input');input.type = 'file'; input.accept='image/*';this.$refs.input.$el.appendChild(input);input.onchange = (event) => {  this.fileName = event.path[0].files[0].name;}  $('input').click();
},

2.提交

var formData = new FormData();
formData.append('id',XXX);

3.注意由于上传文件类型无法通过js转换成(binary)的形式，所以当前交互我采取的方式是用ajax交互

$.ajax({url:'XXX',type:"POST",data:formData,processData:false,   contentType:false,  success:function(data){},error:function(data){}
});

uni-app 实现input:type=file 上传,并实现表单提交相关推荐

Input type=“file“上传文件change事件只触发一次解决方案
Input type="file"上传文件change事件只触发一次解决方案参考文章: (1)Input type="file"上传文件change事件只触发 ...
input type='file' 上传文件时显示文件名及上传进度
https://blog.csdn.net/qq_36687640/article/details/78551217 1.input type='file' 上传文件时显示文件名及上传进度 <i ...
使用input type=file 上传文件时需注意
在asp.net的中使用<input type='file' />控件上传文件对文件的大小有限制,默认情况下大概在4m左右,如果上传再大的文件时就会出页面无法显示的错误. 修改web.co ...
android webview使用html5input id=input type=file/ 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个<input id="input" type="file"/ ...
将input[type=file]上传文件隐藏在按钮下面，隐藏掉默认的样式
直接上代码: <button style="position:relative;" class="btn btn-info btn-fill btn-wd" ...
uniapp实现表单提交带图片上传在做表单提交的时候，我们可能面临有图片上传，放在原生的html就好解决，form标签加上
enctype="multipart/form-data" uniapp微信小程序 1.原图页面部分 <form :model="data" @subm ...
c 中html上传文件大小,IOS微信内置浏览器对html标签input type=file上传的文件大小size错误？...
完整代码: function _s(){ var f = document.getElementById("f").files; //上次修改时间 alert(f[0].lastM ...
.form文件_含文件上传的form表单AJAX提交小结
最近在学习PHP时,遇到不知道如何含文件上传的form表单AJAX提交,现在把这些记录下来以备自己后续复习时用: HTML代码 *姓名: *性别: {eq name='list.sex' value= ...
Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
通过前两篇姿势的入门 Retrofit 2.0 超能实践,完美支持Https传输 Retrofit2.0 完美同步Cookie实现免登录本文出自:http://blog.csdn.net/sk719 ...
Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单
如果嫌麻烦直接可以用我封装好的库:Novate: https://github.com/Tamicer/Novate 通过对Retrofit2.0的前两篇的基础入门和案例实践,掌握了怎么样使用Retr ...

uni-app 实现input:type=file 上传,并实现表单提交

问题描述

解决方案

详细代码

uni-app 实现input:type=file 上传,并实现表单提交相关推荐

最新文章

热门文章