小程序中制作类似微信端上传9图功能

在小程序中制作类似微信客户端中上传功能。

功能一：可单独上传一张

功能二：可多张上传

功能三：可点击删除

wxml：

wxss:

点击上传功能，使用选择照片 wxchooseImage() 和上传 wxuploadFile() ：

这里暂时采用选择几张张就上传几张到文件服务器得到返回的 url 拼接成真是地址数组。选择即上传。并不是说选择之后确定内容后再一并上传。

删除照片，即切掉临时文件中的url和真实文件的url：

最后提交该数据时，向服务器提交的是真实地址的url。

预览大图，使用 wxpreviewImage() :

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

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

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

1页面样式布局

view

css

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

实例请查看地址： >

因为是系统规定的。

方法如下：

1、打开微信并且进入首页，找到并进入最上方输入框。

2、在输入框中选择下面显示的小程序。

3、输入小程序名称，搜索目标小程序。

4、入小程序后，点击右下角的加号按钮。

5、选择第一行上传照片功能。

6、d出可选照片后，选择好要上传的照片，点击勾选随后再选择右下角完成按钮即可上传成功。

以上就是关于小程序中制作类似微信端上传9图功能全部的内容，包括:小程序中制作类似微信端上传9图功能、微信小程序多张图片上传组件、微信小程序相册为什么只能传21张照片等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！