uni-app 157发布朋友圈-批量上传图片
2024-06-13 13:36:39
如下是我测试的截图
/components/free-ui/free-upload-image.vue
<template><view class="flex flex-wrap"><view style="width: 230rpx;" v-for="(item,index) in imageList" :key='index' class="flex align-center justify-center pt-2 position-relative"><image :src="item" class="bg-light rounded" style="width: 210rpx;height: 210rpx;" @click="preview(item)"></image><view class="flex align-center justify-center bg-danger rounded-circle " style="width: 60rpx;height: 60rpx;position: absolute;right: 0;top: 10rpx;background-color: rgba(0,0,0,0.5);" @click="deleteImage(item)"><text class="iconfont text-white font-small">X</text></view></view><view v-if="imageList.length < 9" style="width: 230rpx;" class="flex align-center justify-center" @click="chooseImage"><view class="flex align-center justify-center bg-light rounded" style="width: 210rpx;height: 210rpx;"><text class="text-light-muted" style="font-size: 100rpx;">+</text></view></view></view>
</template><script>import $H from '@/common/free-lib/request.js';export default{props:{data:{type:Array,default:()=>{return []}}},data(){return {imageList:[]}},mounted() {this.imageList = this.data;},methods:{// 选择图片chooseImage(){uni.chooseImage({count:9 - this.imageList.length,sizeType:['compressed'],success:(res)=>{// 上传res.tempFilePaths.forEach(path=>{$H.upload('/upload',{filePath:path},(progress)=>{console.log('上传进度',progress);}).then(url=>{this.imageList.push(url);this.$emit('update',this.imageList);})})// this.imageList = [...this.imageList,...res.tempFilePaths];// this.$emit('update',this.imageList);}})},// 预览图片preview(item){uni.previewImage({current:item,urls:this.imageList})},// 删除图片deleteImage(item){uni.showModal({content:'是否要删除该图片？',success:(res)=>{if(res.confirm){// 执行删除let index = this.imageList.findIndex(url=>url === item);if(index !== -1){this.imageList.splice(index,1);this.$emit('update',this.imageList);}}}})}}}
</script><style>
</style>/pages/find/moments/moments.vue
<template><view><free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar><view class="position-relative" style="height: 620rpx;"><image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image><image :src="user.avatar || '/static/images/demo/demo6.jpg'" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image><text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">{{user.nickname || user.username}}</text></view><!-- 朋友圈列表样式 --><free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list><!-- 评论框 --><free-popup ref="action" bottom transformOrigin="center bottom"><view style="height: 105rpx;" class="bg-light border-top flex align-center"><textarea fixed class="bg-white rounded p-2 font-md" style="height: 45rpx;width: 420rpx;" value="" placeholder="" v-model="content" :focus="true"/><free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg"></text></free-icon-button><free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button></view><!-- 表情包 --><scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light"><view class="flex flex-wrap"><view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)"><text>{{item}}</text></view></view></scroll-view></free-popup><!-- 上拉加载 --><view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10"><text class="text-muted font">{{loadmore}}</text></view></view>
</template><script>import freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue';import freeMomentList from '@/components/free-ui/free-moment-list.vue';import freePopup from '@/components/free-ui/free-popup.vue';import freeIconButton from '@/components/free-ui/free-icon-button.vue';import freeMainButton from '@/components/free-ui/free-main-button.vue';import $H from '@/common/free-lib/request.js';import { mapState } from 'vuex';export default {components:{freeTransparentBar,freeMomentList,freePopup,freeIconButton,freeMainButton},data() {return {content:'',scrollTop:0,faceModal:false,faceList:["
uni-app 157发布朋友圈-批量上传图片相关推荐
- 微信Mac免费版：在Mac上也能浏览朋友圈、浏览相册和发布朋友圈
微信Mac版客户端全新功能升级!!不仅支持查看朋友圈,还能发布朋友圈啦!!!微信正式版支持对朋友圈进行互动和点 赞等操作,还可以浏览朋友圈相册,这是一款运行在OS X上的 社交聊天工具,微信mac版支 ...
- 微信Mac正式版上线！！不仅支持发布朋友圈，还能浏览朋友圈相册
微信Mac版客户端全新功能升级!!不仅支持查看朋友圈,还能发布朋友圈啦!!!微信正式版支持对朋友圈进行互动和点 赞等操作,还可以浏览朋友圈相册,这是一款运行在OS X上的 社交聊天工具,微信mac版支 ...
- 如何在App中实现朋友圈功能之四在朋友圈中添加发送图片功能——箭扣科技Arrownock
如何在App中实现朋友圈功能 之四 在朋友圈中添加发送图片功能 实现概念: 当用户在界面点击发送按钮的时候,如果已经有选择好的图片,我们的做法是先上传图片到服务器,再将图片Id作为Post的属性上传. ...
- 微信Mac版客户端(支持发布朋友圈)v3.1.5(18841)正式版
微信Mac版客户端全新功能升级!!不仅支持查看朋友圈,还能发布朋友圈啦!!!微信正式版支持对朋友圈进行互动和点 赞等操作,还可以浏览朋友圈相册,这是一款运行在OS X上的 社交聊天工具,微信mac版支 ...
- 如何使用文件上传实现发布朋友圈？
使用文件上传组件,通过配置触发器,实现简易朋友圈的发布功能 效果展示 前置准备 发布页面 动态展示页面 具体步骤 制作上传图片 创建图片数据库 添加创建和查询事件 创建上传图片触发器 创建发布动态触发 ...
- 如何在App中实现朋友圈功能之二快速实现用户信息的自定义——箭扣科技Arrownock...
如何在App中实现朋友圈功能 之二 快速实现用户信息的自定义 自我关联社交元素: anSocial中很多的社交元素API,如帖子(Post).相册(Album).文件(File)等,这些API的可选参 ...
- 如何在App中实现朋友圈功能之三快速实现双向好友功能——箭扣科技Arrownock
如何在App中实现朋友圈功能 之三 快速实现双向好友功能 在社交APP的使用中,用户相互添加好友是一个必要的场景,本期技术分享在这里给大家介绍如何利用AnSocial的Friend来实现微博粉丝和微信 ...
- iOS 朋友圈点赞评论，发布朋友圈，想要的都有
最近写了一个朋友圈的点赞.评论盖楼.发布图文朋友圈的demo 仿微信写的,具体的实现,我发布到git上了.发布朋友圈,简单写了两种方法,看你喜欢哪种了,有问题可以私信我 因为代码挺多的,说的再多,不如 ...
- 尤里先生查看陌生人朋友圈教程_微信APP看陌生人朋友圈的操作教程
说到微信APP,估计大家都是熟悉的,那么微信APP看陌生人朋友圈的基础操作各位了解吗?下文就是微信APP看陌生人朋友圈的教程.不懂的各位一起来学习吧! 首先,我们登录微信,打开通讯录. 查找你很久没有 ...
最新文章
- 用于小型图形挖掘研究的瑞士军刀：空手道俱乐部的图表学习Python库
- windows上的svn服务器迁移到linux
- Struts2的OGNL
- python基础——迭代器与生成器
- C++ number of positive divisors计算正除数的实现算法(附完整源码)
- ASP.NET Core on K8S学习初探（3）部署API到K8S
- postgres 支持的线程数_线程池被打满了怎么处理呢，你是否真的了解线程池？
- 前端学习（2646）：vue3.0初识
- ClickHouse内核分析-MergeTree的Merge和Mutation机制
- Linux不仅仅是开源
- Mysql学习总结（39）——49条MySql语句优化技巧
- img标签的before,after伪类
- Qt拖放操作和打印操作
- sql avg和count_SQL sum（），count（）和avg（）函数
- 一天入门Tableau详细教程（上）
- Java项目经验面试总结
- 并行强化学习算法：A2C/A3C
- 无人驾驶入门——2D检测 基于图片的检测算法（四）
- 杨忠国老师专家点评：全球5G手机销量榜出炉
- python爬取豆瓣电影信息_Python爬虫入门 | 爬取豆瓣电影信息
热门文章