小程序上传文件生成订单

小程序上传文件生成订单的步骤:

公司客户要求在订单中添加文件上传功能，就开始查阅资料之旅了，微信小程序扩展能力中有现成的文件上传组件uploader可以使用，而这个项目是在表单中添加上传图片功能，因此需要考虑一些纯册代码逻辑。

首先，刚开始忽略了逻辑问题，做戚宏直接在上传文件的时候通过接口提交到后台，接着遭到了质疑：“如果用户没提交表单，上传的图片就已经到后台了，有点不合逻辑吧”

然后，重新整理逻辑，先把图片临时缓存一下，提交表单的时候，拿到缓存数据，通过接口把图片提交到后台，再把表单数据提交到后台（两个接口是分开的，后台给的，就这样用呗）

uploader简介

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

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

用起仔如来也很方便，在json文件中加入以下引用（可在官方文档找到），然后在wxml文件中直接引入该组件就行，使用起来很方便

{

"usingComponents": {

"mp-uploader": "weui-miniprogram/uploader/uploader"

}

}

官方文档提供了简单的使用案例，如图所示。

通过改变数组长度动桐运态增删组件

<block wx:for="{{数组}}">

组件

</block>

1

2

3

1

2

3

2、点击添加按钮，增加数组的成员，组件相应增加

点击删除按钮，减少数蔽判组的成员，组件相应删除

二、示例

wxml:

<view>

<button bindtap='onTapAdd'>添加input组件</button>

<button bindtap='局并梁onTapDel'>删除Input组件</button>

<block wx:for="{{obj}}" wx:key>

<input value="{{item}}"></input>

</block>

</view>

1

2

3

4

5

6

7

1

2

3

4

5

6

7

js:

data: {

obj:[]

},

/***增加组件 */

onTapAdd:function(e){

var temp=this.data.obj

temp.push(this.data.obj.length)

this.setData({

obj:temp

})

},

/***** 删除最后一个组件，也可以修改删除指定组件*/

onTapDel:function(e){

var temp = this.data.obj

temp.pop(this.data.obj.length)

this.setData({

obj: temp

})

},

wxml部分

<van-uploader file-list="{{ picture_list }}" preview-full-image="{{false}}" max-size="2048000" max-count="9" multiple="{{true}}" bind:after-read="afterRead" bind:delete="deleteImg" />

js部分

afterRead:function(event) {

const { file } = event.detail

    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

    var obj={}

obj.path=file

    this.uploadimg(obj)

},

uploadimg:function(data) {

wx.showLoading({

title:'上传档饥键中...',

        mask:true,

    })

var that =this,

        i = data.i ? data.i :0,

        success = data.success ? data.success :0,

        fail = data.fail ? data.fail :0

    let userInfo=wx.getStorageSync('userInfo')

    let peopleId=userInfo.peopleId

    var picture_list = that.data.picture_list

    wx.uploadFile({

url: baseUrl +'impl/uploadImg',

        filePath: data.path[i].path,

        name:'file',

        formData: {

'type':1,

            'peopleId':peopleId,

        },

        success: (res) =>{

wx.hideLoading()

            success++

            let obj =  JSON.parse(res.data).data

            if(obj.hasOwnProperty('url')){

picture_list.push({

url:obj.url,

                    id:obj.id

                })

                that.setData({

picture_list

})

}

},

        fail: (err) =>{

wx.hideLoading()

            wx.showToast({

title:'上传失败!',

                icon:'none'

            })

fail++

     行巧   },

        complete: () =>{

i++

       肢戚     if (i == data.path.length) {//当图片传完时，停止调用

            }else {//若图片还没有传完，则继续调用函数

                data.i = i

                data.success = success

                data.fail = fail

                that.uploadimg(data)//递归，回调自己

            }

}

})

},

deleteImg(e) {

let index=e.detail.index

    console.log(index)

    let {picture_list}=this.data

    let that=this

    wx.showModal({

content:'确定删除？',

        success: (res) =>{

if (res.confirm) {

picture_list.splice(index,1)

                that.setData({

picture_list

                })

console.log(that.data.picture_list)

            }else if (res.cancel) {

console.log('用户点击取消')

}

},

    })

},

---