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

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

功能一：可单独上传一张

功能二：可多张上传

功能三：可点击删除

wxml：

wxss:

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

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

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

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

预览大图，使用 wxpreviewImage() :

打开需要上传的界面。

首先进入qq在左上角有打卡的功能，这个打卡功能在左侧的资料栏左上角，看起来很明显，打开手机qq以后，找到你要打卡的群，然后点进去，点过“三”以后，在新页面找到打卡选项，然后点击打卡点进去以后点击右上角的“三”这个符号，进入打卡以后，选择打卡方式，比如我选择学习打卡，然后点击右上角发表，只可以上传照片。

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

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

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

1页面样式布局

view

css

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

实例请查看地址： >

很简单呀，再重新上传不就行了吗？具体 *** 作如下。打开微信接龙小程序；

2、新建项目或打开已建的项目，创建一个wxml文件，插入view标签和按钮标签，并添加bindtap；

3、在对应界面的JS文件中，定义点击事件uploadFile，然后调用wxchooseImage()接口API；

4、保存代码并查看左侧模拟器，可以看到一个上传按钮，点击上传按钮，打开一个选择的窗口，选择指定格式的

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