【微信小程序原生】上传图片和视频

wxml

<!-- 上传 S --><view class="img-list"><!-- 上传列表 --><view class="upload-video"><block wx:if="{{src != ''}}"><video src="{{src}}" class="img-li"></video><image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deleteVideo"></image></block></view><block wx:for="{{imgList}}" wx:key="index"><view class="img-li"><view class="img-li" bindtap="previewImg"><image class="uploading-icon" src="{{item}}"></image></view><image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image></view></block><!-- 上传图片/视频 S --><view class="img-li" wx:if="{{imgList.length<=8}}" bindtap="actioncnt"><image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image></view><!-- 上传图片/视频 E --></view><!-- 上传 E -->

// pages/my/my-release-experience-report/index.js
const app = getApp()
Page({/*** 页面的初始数据*/data: {imgList: [],          // 上传列表src: "",        // 上传视频},// 点击添加选择chooseSource: function () {var _this = this;wx.showActionSheet({itemList: ["拍照", "从相册中选择"],itemColor: "#000000",success: function (res) {if (!res.cancel) {if (res.tapIndex == 0) {_this.imgWShow("camera")        //拍照} else if (res.tapIndex == 1) {_this.imgWShow("album")      //相册}}}})},// 点击调用手机相册/拍照imgWShow: function (type) {var _this = this;let len = 0;if (_this.data.imgList != null) {len = _this.data.imgList.length}   //获取当前已有的图片wx.chooseImage({count: 6 - len,     //最多还能上传的图片数,这里最多可以上传5张sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有success: function (res) {wx.showToast({title: '正在上传...',icon: "loading",mask: true,duration: 1000})// 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片var imgList = res.tempFilePathslet tempFilePathsImg = _this.data.imgList// 获取当前已上传的图片的数组var tempFilePathsImgs = tempFilePathsImg.concat(imgList)_this.setData({imgList: tempFilePathsImgs})},fail: function () {wx.showToast({title: '图片上传失败',icon: 'none'})return;}})},// 预览图片previewImg: function (e) {let index = e.target.dataset.index;let _this = this;wx.previewImage({current: _this.data.imgList[index],urls: _this.data.imgList})},/*** 点击删除图片*/deleteImg: function (e) {var _this = this;var imgList = _this.data.imgList;var index = e.currentTarget.dataset.index;      //获取当前点击图片下标wx.showModal({title: '提示',content: '确认要删除该图片吗?',success: function (res) {if (res.confirm) {console.log("点击确定了")imgList.splice(index, 1);} else if (res.cancel) {console.log("点击取消了");return false}_this.setData({imgList})}})},/*** 点击删除视频*/deleteVideo: function(e) {var _this = this;var src = _this.data.src;var index = e.currentTarget.dataset.index;      //获取当前点击图片下标wx.showModal({title: '提示',content: '确认要删除该视频吗?',success: function (res) {if (res.confirm) {console.log("点击确定了")var unsrc = '';_this.setData({src: unsrc})} else if (res.cancel) {console.log("点击取消了");return false}}})},/*** 图片  视频 选择框*/actioncnt: function() {var _this = this;wx.showActionSheet({itemList: ['图片', '视频'],success: function(res) {if(res.tapIndex == 0) {_this.chooseSource()}if(res.tapIndex == 1) {_this.chooseVideo()}},fail: function(res) {console.log(res.errMsg)}})},/*** 选择视频*/chooseVideo: function() {var _this = this;wx.chooseVideo({success: function(res) {_this.setData({src: res.tempFilePath,})}})},/*** 上传视频 目前后台限制最大100M, 以后如果视频太大可以选择视频的时候进行压缩*/uploadvideo: function() {var src = this.data.src;wx.uploadFile({url: '',methid: 'POST',           // 可用可不用filePath: src,name: 'files',              // 服务器定义key字段名称header: app.globalData.header,success: function() {console.log('视频上传成功')},fail: function() {console.log('接口调用失败')}})},
})

css

/* 上传的图片 */
.img-list {display: flex;flex-wrap: wrap;
}
.img-li {width: 200rpx;height: 200rpx;margin-right: 39rpx;margin-bottom: 23rpx;
}.img-li:first-child {margin-right: 0;
}
.img-li image {width: 100%;height: 100%;
}
.icon-delete {width: 28rpx !important;height: 28rpx !important;position: relative;float: right;margin-top: -229rpx;margin-right: -15rpx;z-index: 99;
}
.icon-deletes {width: 28rpx !important;height: 28rpx !important;position: relative;float: right;margin-top: -9rpx;margin-left: -10rpx;margin-right: 29rpx;z-index: 99;
}
.content-input-z {display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;color: #999999;
}.content-input-z {margin-top: 31rpx;
}.content-input-z view image {width: 32rpx;height: 31rpx;margin-right: 11rpx;
}
.content-input-z view {display: flex;align-items: center;
}

【微信小程序原生】上传图片和视频相关推荐

微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...
chatgpt智能问答微信小程序+后端源码+视频搭建教程
chatgpt智能问答微信小程序+后端源码+视频搭建教程,这是一套微信小程序,后端是thinkphp框架为接口的,后端是前后端分离用elmentUI的源码框架. 小狐狸GPT付费体验系统是一款基于Th ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
微信小程序如何上传音视频到百度云Bos cloud BCE
在做了一系列调查之后,目前为止暂未发现有相关的文章,在此简单记录一下解决此问题的步骤,造福来人. 本人的解决方案参考了百度云BOS官方文档,地址如下: https://cloud.baidu.com/ ...

【微信小程序原生】上传图片和视频

【微信小程序原生】上传图片和视频相关推荐

最新文章

热门文章

【微信小程序原生】 上传图片和视频

【微信小程序原生】 上传图片和视频相关推荐

最新文章

热门文章

【微信小程序原生】上传图片和视频

【微信小程序原生】上传图片和视频相关推荐