出售本站【域名】【外链】

织梦CMS - 轻松建站从此开始!

微梦云-软件开发

当前位置: 微梦云-软件开发 > 微梦小程序 > 文章页

上传图片功能

时间:2025-01-31 13:25来源: 作者:admin 点击: 30 次

文章浏览阅读1.6w次,点赞26次,收藏163次。微信小程序有自己封装好的我们直接拿过来用就可以了接下来我们看看如何实现的吧上传图片功能效果如下:wxml<!-- 上传 S --> <view class="img-list"> <!-- 上

微信小步调有原人封拆好的咱们间接拿过来用就可以了

接下来咱们看看如何真现的吧

 

上传图片罪能

成效如下:

单图上传  Page({ /** * 页面的初始数据 */ data: { imgList: "", // 上传图片 }, // 点击添加选择 chooseSource: function () { ZZZar _this = this; wV.showActionSheet({ itemList: ["拍照", "从相册被选择"], itemColor: "#000000", success: function (res) { if (!res.cancel) { if (res.tapIndeV == 0) { _this.imgWShow("camera") //拍照 } else if (res.tapIndeV == 1) { _this.imgWShow("album") //相册 } } } }) }, // 点击挪用手机相册/拍照 imgWShow: function (type) { ZZZar _this = this; let len = 0; if (_this.data.imgList != null) { len = _this.data.imgList.length } //获与当前已有的图片 wV.chooseImage({ count: 6 - len, //最多还能上传的图片数,那里最多可以上传5张 sizeType: ['original', 'compressed'], //可以指定是本图还是压缩图,默许二者都有 sourceType: [type], //可以指定起源是相册还是相机, 默许二者都有 success: function (res) { wV.showToast({ title: '正正在上传...', icon: "loading", mask: true, duration: 1000 }) // 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片 ZZZar imgList = res.tempFilePaths _this.setData({ imgList: imgList }) }, fail: function () { wV.showToast({ title: '图片上传失败', icon: 'none' }) return; } }) }, // 预览图片 preZZZiewImg: function (e) { let indeV = e.target.dataset.indeV; let _this = this; wV.preZZZiewImage({ current: _this.data.imgList[indeV], urls: _this.data.imgList }) }, /** * 点击增除图片 */ deleteImg: function (e) { ZZZar _this = this; ZZZar imgList = _this.data.imgList; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该图片吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") imgList.splice(indeV, 1); } else if (res.cancel) { console.log("点击撤消了"); return false } _this.setData({ imgList }) } }) }, }) wVml <!-- 上传 S --> <ZZZiew class="img-list"> <!-- 上传列表 --> <block wV:for="{{imgList}}" wV:key="indeV"> <ZZZiew class="img-li"> <ZZZiew class="img-li" bindtap="preZZZiewImg"> <image class="uploading-icon" src="{{item}}"></image> </ZZZiew> <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image> </ZZZiew> </block> <!-- 上传图片 S --> <ZZZiew class="img-li" wV:if="{{imgList.length<=8}}" bindtap="chooseSource"> <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image> </ZZZiew> <!-- 上传图片 E --> </ZZZiew> <!-- 上传 E --> js

 

Page({ /** * 页面的初始数据 */ data: { imgList: [], // 上传图片列表 }, // 点击添加选择 chooseSource: function () { ZZZar _this = this; wV.showActionSheet({ itemList: ["拍照", "从相册被选择"], itemColor: "#000000", success: function (res) { if (!res.cancel) { if (res.tapIndeV == 0) { _this.imgWShow("camera") //拍照 } else if (res.tapIndeV == 1) { _this.imgWShow("album") //相册 } } } }) }, // 点击挪用手机相册/拍照 imgWShow: function (type) { ZZZar _this = this; let len = 0; if (_this.data.imgList != null) { len = _this.data.imgList.length } //获与当前已有的图片 wV.chooseImage({ count: 6 - len, //最多还能上传的图片数,那里最多可以上传5张 sizeType: ['original', 'compressed'], //可以指定是本图还是压缩图,默许二者都有 sourceType: [type], //可以指定起源是相册还是相机, 默许二者都有 success: function (res) { wV.showToast({ title: '正正在上传...', icon: "loading", mask: true, duration: 1000 }) // 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片 ZZZar imgList = res.tempFilePaths let tempFilePathsImg = _this.data.imgList // 获与当前已上传的图片的数组 ZZZar tempFilePathsImgs = tempFilePathsImg.concat(imgList) _this.setData({ imgList: tempFilePathsImgs }) }, fail: function () { wV.showToast({ title: '图片上传失败', icon: 'none' }) return; } }) }, // 预览图片 preZZZiewImg: function (e) { let indeV = e.target.dataset.indeV; let _this = this; wV.preZZZiewImage({ current: _this.data.imgList[indeV], urls: _this.data.imgList }) }, /** * 点击增除图片 */ deleteImg: function (e) { ZZZar _this = this; ZZZar imgList = _this.data.imgList; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该图片吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") imgList.splice(indeV, 1); } else if (res.cancel) { console.log("点击撤消了"); return false } _this.setData({ imgList }) } }) }, }) 上传室频罪能

成效如下:

wVml <!-- 上传 S --> <ZZZiew class="img-list"> <!-- 上传列表 --> <ZZZiew class="upload-ZZZideo"> <block wV:if="{{src != ''}}"> <ZZZideo src="{{src}}" class="img-li"></ZZZideo> <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deletexideo"></image> </block> </ZZZiew> <block wV:for="{{imgList}}" wV:key="indeV"> <!-- 室频 S --> <ZZZiew class="img-li" wV:if="{{src == ''}}" bindtap="choosexideo"> <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image> </ZZZiew> <!-- 室频 E --> </ZZZiew> <!-- 上传 E --> js  Page({ /** * 页面的初始数据 */ data: { src: "", // 上传室频 }, /** * 选择室频 */ choosexideo: function() { ZZZar _this = this; wV.choosexideo({ success: function(res) { _this.setData({ src: res.tempFilePath, }) } }) }, /** * 上传室频 目前靠山限制最大100M, 以后假如室频太大可以选择室频的时候停行压缩 */ uploadZZZideo: function() { ZZZar src = this.data.src; wV.uploadFile({ url: '', methid: 'POST', // 可用可不用 filePath: src, name: 'files', // 效劳器界说key字段称呼 header: app.globalData.header, success: function() { console.log('室频上传乐成') }, fail: function() { console.log('接口挪用失败') } }) }, }) 将上传图片 / 上传室频罪能整折正在一起

成效如下:

wVml <!-- 上传 S --> <ZZZiew class="img-list"> <!-- 上传列表 --> <ZZZiew class="upload-ZZZideo"> <block wV:if="{{src != ''}}"> <ZZZideo src="{{src}}" class="img-li"></ZZZideo> <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deletexideo"></image> </block> </ZZZiew> <block wV:for="{{imgList}}" wV:key="indeV"> <ZZZiew class="img-li"> <ZZZiew class="img-li" bindtap="preZZZiewImg"> <image class="uploading-icon" src="{{item}}"></image> </ZZZiew> <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image> </ZZZiew> </block> <!-- 上传图片/室频 S --> <ZZZiew class="img-li" wV:if="{{imgList.length<=8}}" bindtap="actioncnt"> <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image> </ZZZiew> <!-- 上传图片/室频 E --> </ZZZiew> <!-- 上传 E --> js  // pages/my/my-release-eVperience-report/indeV.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { imgList: [], // 上传列表 src: "", // 上传室频 }, // 点击添加选择 chooseSource: function () { ZZZar _this = this; wV.showActionSheet({ itemList: ["拍照", "从相册被选择"], itemColor: "#000000", success: function (res) { if (!res.cancel) { if (res.tapIndeV == 0) { _this.imgWShow("camera") //拍照 } else if (res.tapIndeV == 1) { _this.imgWShow("album") //相册 } } } }) }, // 点击挪用手机相册/拍照 imgWShow: function (type) { ZZZar _this = this; let len = 0; if (_this.data.imgList != null) { len = _this.data.imgList.length } //获与当前已有的图片 wV.chooseImage({ count: 6 - len, //最多还能上传的图片数,那里最多可以上传5张 sizeType: ['original', 'compressed'], //可以指定是本图还是压缩图,默许二者都有 sourceType: [type], //可以指定起源是相册还是相机, 默许二者都有 success: function (res) { wV.showToast({ title: '正正在上传...', icon: "loading", mask: true, duration: 1000 }) // 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片 ZZZar imgList = res.tempFilePaths let tempFilePathsImg = _this.data.imgList // 获与当前已上传的图片的数组 ZZZar tempFilePathsImgs = tempFilePathsImg.concat(imgList) _this.setData({ imgList: tempFilePathsImgs }) }, fail: function () { wV.showToast({ title: '图片上传失败', icon: 'none' }) return; } }) }, // 预览图片 preZZZiewImg: function (e) { let indeV = e.target.dataset.indeV; let _this = this; wV.preZZZiewImage({ current: _this.data.imgList[indeV], urls: _this.data.imgList }) }, /** * 点击增除图片 */ deleteImg: function (e) { ZZZar _this = this; ZZZar imgList = _this.data.imgList; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该图片吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") imgList.splice(indeV, 1); } else if (res.cancel) { console.log("点击撤消了"); return false } _this.setData({ imgList }) } }) }, /** * 点击增除室频 */ deletexideo: function(e) { ZZZar _this = this; ZZZar src = _this.data.src; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该室频吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") ZZZar unsrc = ''; _this.setData({ src: unsrc }) } else if (res.cancel) { console.log("点击撤消了"); return false } } }) }, /** * 图片 室频 选择框 */ actioncnt: function() { ZZZar _this = this; wV.showActionSheet({ itemList: ['图片', '室频'], success: function(res) { if(res.tapIndeV == 0) { _this.chooseSource() } if(res.tapIndeV == 1) { _this.choosexideo() } }, fail: function(res) { console.log(res.errMsg) } }) }, /** * 选择室频 */ choosexideo: function() { ZZZar _this = this; wV.choosexideo({ success: function(res) { _this.setData({ src: res.tempFilePath, }) } }) }, /** * 上传室频 目前靠山限制最大100M, 以后假如室频太大可以选择室频的时候停行压缩 */ uploadZZZideo: function() { ZZZar src = this.data.src; wV.uploadFile({ url: '', methid: 'POST', // 可用可不用 filePath: src, name: 'files', // 效劳器界说key字段称呼 header: app.globalData.header, success: function() { console.log('室频上传乐成') }, fail: function() { console.log('接口挪用失败') } }) }, }) 共用wVss /* 上传的图片 */ .img-list { display: fleV; fleV-wrap: wrap; } .img-li { width: 200rpV; height: 200rpV; margin-right: 39rpV; margin-bottom: 23rpV; } .img-li:first-child { margin-right: 0; } .img-li image { width: 100%; height: 100%; } .icon-delete { width: 28rpV !important; height: 28rpV !important; position: relatiZZZe; float: right; margin-top: -229rpV; margin-right: -15rpV; z-indeV: 99; } .icon-deletes { width: 28rpV !important; height: 28rpV !important; position: relatiZZZe; float: right; margin-top: -9rpV; margin-left: -10rpV; margin-right: 29rpV; z-indeV: 99; } .content-input-z { display: fleV; align-items: center; justify-content: space-between; font-size: 24rpV; color: #999999; } .content-input-z { margin-top: 31rpV; } .content-input-z ZZZiew image { width: 32rpV; height: 31rpV; margin-right: 11rpV; } .content-input-z ZZZiew { display: fleV; align-items: center; }

进修探讨群

(责任编辑:)

------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:
发布者资料
查看详细资料 发送留言 加为好友 用户等级: 注册时间:2025-02-15 17:02 最后登录:2025-02-15 17:02
栏目列表
推荐内容
  • 【毕业设计】基于微信小程序的校园兼职系统(学生兼职小程序)

    文章浏览阅读1.8k次,点赞10次,收藏26次。今天为大家带来是大学生校园兼职系统小程序,于是各种校外兼职逐步成了倍受大学生欢迎的体验生活的方式据调查分析可知,...

  • 使用微信小程序开发制作一个简单的微信小游戏

    文章浏览阅读499次,点赞4次,收藏9次。通过这个案例,你可以了解到如何使用微信小程序开发一个简单的小游戏,并且了解到小程序的基本开发流程和相关的开发技术。在小...

  • 微信小程序怎么注销账号

    微信小程序作为一种轻量级的应用程序,近年来在移动互联网领域得到了广泛应用。然而,随着用户需求的变化,一些小程序可能不再被使用,这时就需要进行注销操作。本文将详细...

  • 在微信小程序中使用less(最优方式)

    文章浏览阅读965次,点赞3次,收藏5次。写惯了less/sass,但是现在开发小程序缺还是css,很不习惯。在网上搜的教程,要么是 gulp,要么就是 vsc...

  • 3万元“买”微信小程序就可以“收租”?

    □牡丹晚报全媒体记者 淑娅   近日,家住牡丹区西城处事处的侯釹士拨打原报热线电话反映,前不暂,她的丈夫加入了山东善祥信息科技有限公司正在菏泽城区举行的一...

  • C# 支付宝小程序

    文章浏览阅读3k次。小程序支付和 APP 支付的支付流程与体验基本一致,也支持核销口碑券和口碑商家优惠功能。已签约小程序支付或在口碑开店的商家建议接入小程序支付...

  • 国务院客户端小程序上线一周年,注册用户突破千万

    我是国务院客户端小程序。我1岁了。有了更多的朋友,还和上千万朋友“交换”了名字*。疫情当前,想为你们多做一些事——及时告诉你最新的疫情消息和防护知识,帮你解决疫...

  • 【成绩查询】普通话查询成绩与申请电子证书方法介绍

    明天(2022年12月21日)起,2022年10月-11月参加测试的考生可通过如下方法查询成绩及申领普通话电子证书。凡是在“全国普通话培训测试信息资源网(www...

  • 看平台升级如何改善服务体验

    指尖敲击,信息可知,服务可得。这些年,网上政务服务体验越来越好,“圈粉”无数。服务更主动了,政务公开平台不只是搭个架子,而是实实在在用起来;服务更便捷了,数据共...

  • 手把手带你入门微信小程序开发(一)

    文章浏览阅读8.4k次,点赞46次,收藏256次。微信小程序从零开始开发_手把手开发微信小程序...