微信小程序同时上传视频和图片（支持多选）

LiuNian-YB

已于 2022-05-26 17:18:57 修改

阅读量2.4k

点赞数 3

分类专栏：小程序文章标签：微信小程序前端小程序

于 2022-05-26 17:10:24 首次发布

本文链接：https://blog.csdn.net/August_xiaonian/article/details/124988111

版权

本文详细介绍了微信小程序实现同时上传视频和图片的步骤，包括小程序页面代码和JS内代码，适合初学者快速上手。通过保姆级别的注释，帮助开发者轻松满足上传需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
二、使用步骤
- 1.小程序页面代码
- 2.小程序JS内代码
总结

前言

随着小程序的的不断发展，小程序技术也越来越广泛了，很多人都要了解学习小程序是必不可少的技能，本文就介绍了小程序上传图片和视频的教程（废话不多说，上代码）。
保姆级别注释。

二、使用步骤

1.小程序页面代码

  <image class="item-img"  bindtap="getimg" style="margin-right:20rpx" src=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LiuNian-YB

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序---上传图片（视频）功能（单个/多个）

weixin_43452154的博客

07-29

2788

只介绍图片上传的方法，视频上传的方法和图片上传的方法类似，就不一一说明啦，不懂的话可以私聊我。二、点击图片调用add_img方法（）

微信小程序开发中的图片选择与上传

最新发布

m0_75244442的博客

07-31

420

在微信小程序开发中，图片选择与上传是非常常见的功能。下面是一个详细的代码案例，包括了图片选择、预览和上传的完整流程。请注意，以下代码仅供参考，具体实现方式可能因项目需求而有所不同。建议根据自己的项目需求进行相应修改。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序图片视频上传

weixin_47106572的博客

05-20

744

1,图片上传功能 picUpload.wxml  <view class="img-list">  <block wx:for="{{imgList}}" wx:key="index"> <view class="img-li"> <view class="img-li" bindtap="previewImg"> &lt

微信小程序上传多张图片以及视频

01-27

WeChatUploadImageAndVideo 微信小程序上传多张图片以及视频在需要上传页面的js中 upFiles.js ------ ./utils/upFiles.js var upFiles = require('../../utils/upFiles.js') Page({ /** * 页面的初始数据 */ data: { upFilesBtn:true, upFilesProgress:false, maxUploadLen:6, }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, // 预览图片 previewImg: function (e) { let imgsrc = e.curre

小程序上传图片视频文件(带删除功能)demo

08-08

微信小程序上传图片视频文件(带删除功能)demo，小程序

微信小程序上传组件（可同时长传图片+视频）

jijunqing321的博客

07-08

2318

微信小程序上传组件，同时支持上传视频+图片，并且可以返显。

微信小程序封装上传文件组件

03-10

在微信小程序开发中，经常会遇到需要用户上传图片的需求，例如发布动态、个人头像设置等。为了实现这一功能，开发者通常需要封装一个专门用于上传文件的组件。本篇将详细探讨如何在微信小程序中封装一个上传图片的...

微信小程序文件上传(手机文件管理器上传)

08-07

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的服务。...在开发过程中，需要充分考虑用户体验和安全性，同时也要充分利用微信小程序提供的工具和第三方库来提高开发效率。

微信小程序上传多张图片

qq_45208940的博客

01-18

1792

微信小程序可以上传单张，多张，数量不超过一定数量。

微信小程序上传多张图片-视频，预览图片

阿里巴啦的博客

06-11

6529

考虑到日常项目会用到，就整理了一下这案例，可以上传指定数量的图片或视频； wxml: <view class='the-tit'>上传图片：</view> <view class='share-pics'> <view class='slug-cons'> <view class='pics'> <view ...

微信小程序选择多个视频上传

网络Online

05-09

1718

//From:www.uzhanbao.com var chooseImage = (t, count) =>{ wx.chooseImage({ count: count, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { var imgArr = t.data.up...

小程序上传图片/视频

hql1024的博客

03-10

746

<view class="col"> <view class="exhibit" wx:for="{{upload_list}}" wx:key='index'> <image src="{{item}}"></image> <view class="del" data-...

小程序-多图上传和视频上传（优化版2.0，添加压缩功能）

qq_38337245的博客

11-03

999

项目中需要一次多图上传和视频上传就封装了一个简单通用的js 使用很简单复制一下代码粘贴到一个空的js，我命名为chooseUpload,将这个文件放到项目文件夹名称为utils中，没有这个文件夹可以自己新建一个 js代码如下： const App = getApp(); //多图上传图片、单个上传视频 const uploadInit = function(){ var up = uploadInit.prototype;//给方法添加属性 //选择上传方式 up....

小程序图片、视频上传

panlxiang的博客

12-21

1489

第一次写小程序项目时遇到的多张图片上传问题，小程序api上传upload一次只能传一张，以及视频的上传。附上代码 wxml页面代码  <form bindsubmit="onSave"> <textarea class='opinion opinion_text' name="opinion" p...

微信小程序上传图片音频视频

shaonian1996

05-26

2180

wxml: <button bindtap='imageUpload'>上传图片</button> <button bindtouchstart="startRecode" bindtouchend="endRecode" class="cxbtn">上传音频</button> <button bindtap='videoUpload...

微信小程序多张图片上传及上传视频[完整演示案例]

林羽凡_CSDN专栏

09-28

6784

扫描二维码，进入首页，找到“小程序演示”，表单类>林羽凡表单及多张图片上传提交演示，点击进入即可。注：后端有PHP的上传类，需要的联系我。...

一、微信小程序(简单上传)-存储图片视频文件

RD_Xiaobai的博客

04-14

1650

cos对象存储，可以存储图片视频以及任何格式的文档。以下介绍怎么使用cos存储图片视频文件，需要做什么配置，如何使用。

微信小程序组件：图片、视频、语音上传

miracle0623的专栏

03-02

2609

这个组件封装了图片、视频、语音上传功能，也是最近开发过程中的一个收获，代码如下：

微信小程序七牛上传、删除图片及视频

weixin_46390926的博客

09-11

861

七牛云上传、删除图片、视频（对七牛云存储空间进行上传删除）