目录

微信小程序之图片音频视频上传附前后端代码示例

目录

微信小程序之图片、音频、视频上传(附前后端代码示例)

最近搞小程序开发,碰到了图片上传和音视频上传的问题,百度了下,网上示例不多,鄙人不才,就用TP3.2.3自己写了一个小程序上传图片、音视频的示例,刚好也是项目所需。能力有限,不喜勿喷,仅供新手参考。

https://i-blog.csdnimg.cn/blog_migrate/60449563eb00a23eca4f06b14605882c.png ,上传作品要求为图片、音频或者视频。话不多说,上代码!

前端代码:

https://i-blog.csdnimg.cn/blog_migrate/9fd237a8eb69818449518c859970d1e0.png 点击上传图片,图片会显示预览。效果如下:

https://i-blog.csdnimg.cn/blog_migrate/7cf06157a8ceabd81005ae432c5101c1.png

js交互部分的代码如下:

wxml :  用的catchtao:get=‘get’;

https://i-blog.csdnimg.cn/blog_migrate/d0c0a15c99997c6efbba4beec081fc7f.png

后端接收处理如下:

https://i-blog.csdnimg.cn/blog_migrate/6204e7bf28c4c54b47ed8bafb688fe50.png

至此,小程序的图片上传告一段落。不过有几个点,需要提醒下:

1,这只是上传图片,如果上传视频和音频的时候,前端代码需要修改一下,代码如下:

https://i-blog.csdnimg.cn/blog_migrate/d6be26db469fa70dbbc8188071209484.png

js的交互也要随之改一下,

https://i-blog.csdnimg.cn/blog_migrate/f48ffd41a931f7475d893d7b9fbf9c35.png

后端用上面那个方法,可以一样可以接收到视频音频的信息的。

2,后端只是写了一个保存图片,音视频的路径,没有其他信息,可以根据情况,发送想要的数据过来,然后一起存入数据库!

https://i-blog.csdnimg.cn/blog_migrate/e7c407d794a3d0152e810e15f2246405.png

好了,告一段落了,如果有问题可以加我QQ329570036或者微信 wqx2080 , 大家一起努力、成长。

觉得对您有帮助可以随意打赏哟

https://img-blog.csdnimg.cn/20190613221210339.png