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){
    }
});