微信小程序uploader上传文件并提交表单数据完整案例（接口框架WebAPI）

写在前面的话

最近又自己在折腾微信小程序了。最新的一个功能中需要实现图片上传。幸运的是，微信小程序扩展能力中有现成的文件上传组件uploader可以使用，而不幸的是，这个组件坑实在太多了，而我又不是单纯的文件上传，还需要同步上传表单数据，因此各种坑，要么就是数据传不过去，要么就是后台取不到数据，折腾了我一天，各种尝试，终于搞定了。前后端完整用法记录一下，希望大家都能快速上手~

uploader介绍

uploader是微信小程序WeUI组件库中的一个图片上传的组件。大家可以在小程序开发文档中——扩展能力中找到相关用法。

这是一个集合了图片选择、上传、预览、删除的完整组件，属性定义也比较全面，可以自定义上传个数，有上传loading提醒和失败提醒，点击预览功能等，基本可以涵盖图片文件上传的所有功能要求。

用法也很简单，在json文件中加入引用后，在wxml文件中直接引入该组件就行，不需要跟自定义的那种文件上传一样，定义一堆标签和样式，方便多了。

官方文档有简单的使用案例：
1.在json中引入uploader组件
2.在wxml中调用该组件，设置属性方法等

 <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{
    
    {selectFile}}" upload="{
    
    {uplaodFile}}" files="{
    
    {files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>

3.定义js中的上传方法

Page({
   
   
    data: {
   
   
        files: [{
   
   
            url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
        }, {
   
   
            loading: true
        }, {
   
   
            error: true
        }]
    },
    onLoad() {
   
   
        this.setData({
   
   
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })
    },

    selectFile(files) {
   
   
        console.log('files', files)
        // 返回false可以阻止某次文件上传
    },
    uplaodFile(files) {
   
   
        console.log('upload files', files)
        // 文件上传的函数，返回一个promise
        return new Promise((resolve, reject) => {
   
   
            setTimeout(() => {
   
   
                reject('some error')
            }, 1000)
        })
    },
    uploadError(e) {
   
   
        console.log('upload error', e.detail)
    },
    uploadSuccess(e) {
   
   
        console.log('upload success', e.detail)
    }
});

这部分代码里面其实只需要补充uplaodFile上传方法调用后台上传图片的接口，上传功能就算完整了，这算是一个可用的完整Demo。但是实际使用起来，还是需要完善一下滴。废话不多说，直接上代码~

用法与代码

小程序前端

1.如前文所说，在json中引入组件，在页面调用

 <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{
    
    {selectFile}}" upload="{
    
    {uplaodFile}}" files="{
    
    {files}}" max-count="1" title=""></mp-uploader>

因为我只需要上传一张图片，因此设置max-count等于1。

2.在uplaodFile中，需要调用resolve({urls})方法设置上传成功状态，否则图片会如下图所示一直显示在加载中，体验很不友好，因此先“假装”已经上传成功，等之后提交表单时再真正上传到后台。