微信小程序多张图片上传组件

在实际开发中，很多时候都需要要上传图片，但是对于上传多张时需要一张张的上传，因为图片都可能比较大，这时就需要我们对上纯则传图片的API进行进一步的处理，这样就解决了我们同时选择上传多张图片需求。所以歼棚为了方便以后使用，封装成一个特定的组件分享出氏裤则来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张图片上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1.页面样式布局

view

css

图片插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： https://github.com/kingbuwu/uploadImages

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('用户点击取消')

}

},

    })

},

你好，试试以下的方法：一、摘要Asp组件有内置的、服务器安装时附带的，更多的是第三方提供的，今天来学习文件上传的其中一个组件aspupload组件使用方法。

二、aspupload组件的下载、安装或注册 1、asp组件的下载、安装

（1）可以从网上下载。

（2）直接双击后进行安装。

AspUpload组件下载2、asp上传组件的功能

a.限制上载文件的大小

b.设置用户的权限

c.修改文件属性

d.同时上载多个文件

e.能够将文件保存到数据库中

f.支持文件删除，自动生成与服务器上文件不同名的文件

g.拥有管理权限的用户甚至可以使用该控件进行远程注册

三、aspupload组件的简单应用

1、实例一（1.asp）：通过代码实现三个文件的上传功能。

如下图所示：

（1）静态页面：1个表单，三个文件域，一个按钮，其中表单form的动作如下。 （2）其中客户端文件要注意几点：

* 文件上载提梁孙交表单(Form)的enctype必须指定为“multipart/form-data”

* 语句表示上载文件域，用户可以在该域中输入或选定文件。

* 传递一个参数act（名称可自己取），其值可以自己随便定，目的是触发上传事件。

（3）动态代码如下：

2、实例二（2.asp）：修改程序1.asp，要求在上传文件后显示上传文件的文件名及大小。

增加如下代码： response.write("文件1是：

")response.write(upload.files(1).path)

response.write("文件2是：

")response.write(upload.files(2).path)

response.write("文件3是：

")

response.write(upload.files(3).path)

说明：

upload.files方法用来获取文件的相关属性，path是文件的路径，size是文件的大小。

3、实例三（3.asp）：修改程序2.asp，要求上传的三个文件大小不能超过5K，如果上传的文件已经存在则要求不覆盖文件。

在上传之前增加如下代码：

upload.setmaxsize 5120,false

upload.overwritefiles=fals说明：

（1）upload.setmaxsize 5120,false　其功能为设置文件最大为5120字节，false参数说明当文件超过5120字节时则删除超过部分，true参数说明当文件超过5120字节时则出错。

（2）upload.overwritefiles=false，其功能表示文件不进行覆盖，如果上传同样文件名的文件，上传后文件名自动会在后面添加一个数字。

四、自学第二个上传文件的组件

1、Lyfupload组件的下载

2、学习此组件的安装或注册

3、通过课本例子进行文件的上传

五、问题

1、传到学校里服务器172.18.0.7运李猜行时出现以下错误，Server.CreateObject 失败

分析原因：学校服务器不支持aspupload上传组件

2、如果服务器不支持aspupload等上传组件，请大家使用无组哪渣型件上传功能（编写代码），见书本上P322，此类代码比较复杂，同学们能够拿来使用，无须自己编写。

3、大家在网上申请个人空间时要看清服务器支持哪些组件，这样有利于编写代码。

---