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

Posted 2023-05-02

参考技术A 在小程序中制作类似微信客户端中上传图片功能。

功能一：可单独上传一张图片
功能二：可多张上传
功能三：可点击删除图片

wxml：

wxss:

点击上传图片功能，使用选择照片 wx.chooseImage() 和上传 wx.uploadFile() ：

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

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

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

图片预览大图，使用 wx.previewImage() :

《昱杰多功能订单管理系统》V24.4更新日志：接入七牛云存储

更新日志

1、接入七牛云存储，在“系统设置 - 七牛云存储”中配置好相关参数，之后系统中上传的图片将存储至七牛云，前台用户访问到的将是七牛云服务器中的图片，以减轻您服务器的带宽压力；

2、可将配置七牛云存储之前，系统中上传的图片一键同步至七牛云。

 

在线演示

小程序（微信端点击如下图片即可访问，非微信端请使用微信扫一扫如下图片进行访问）：

前台演示：https://www.yvjie.cn/demo/yjorder/

品牌分类页：https://www.yvjie.cn/demo/yjorder/category/index.html

后台演示：https://www.yvjie.cn/demo/yjorder/admin.php（直接点登录即可）

免费试用：

 

更新截图