uniapp上传（拍照、本地），预览，删除图片

效果图如下

点击预览效果

代码部分

template代码

<template><view class="addrpage_text"><view class="addrimg"><view class="upimg"><view class="uni-uploader__files"><view v-for="(image, index) in imageList" :key="index"><view class="uni-uploader__file"><view class="delete" @tap="onDeleteClick(index)"><text>✖️</text></view><image class="uni-uploader__img" :src="data:image" :data-src="data:image" @tap.stop="lookimgbut(index)"></image></view></view></view><button @tap="onGetImgClick">点击上传图片</button></view></view></view>
</template>

js代码

<script>export default {data() {return {imageList:[],fileimag:[]};},onLoad() {},methods: {//上传onGetImgClick() {const that = thisuni.chooseImage({count: 5, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项success: function (res) {// console.log('res.tempFilePaths',res.tempFilePaths)const len = that.imageList.lengthfor (let i = 0; i < 5 - len; i++) {if (res.tempFilePaths[i]) that.imageList.push(res.tempFilePaths[i])//这是我为了方便上传oss存的路径，可以不写if (res.tempFilePaths[i]) that.fileimag.push(res.tempFiles[i])}}})},//删除功能onDeleteClick(index) {this.imageList.splice(index, 1)//这是我为了方便上传oss存的路径，可以不写this.fileimag.splice(index, 1)},// 预览功能lookimgbut(image) {uni.previewImage({urls: this.imageList,current:image,loop:false //是否可循环预览，默认值为 false，有需要的可以设置为true})},},}
</script>

css代码

/* 上传图片盒子 */.addrimg{width: 100%;background-color: rgb(255, 255, 255);margin-bottom: 17rpx;}.uptext{color: rgba(74,74,74,1);font-size: 28rpx;padding: 30rpx 0rpx 0rpx 30rpx;}.upimg{width: 100%;}.upimg::after{content: '';display: block;clear: both;}.upimg>image{width: 159rpx;height: 159rpx;margin: 20rpx 0rpx 20rpx 30rpx;float: left;}.uni-uploader__file{float: left;width: 159rpx;height: 159rpx;margin: 20rpx 0rpx 20rpx 30rpx;position: relative;}/* 上传成功的图片 */.uni-uploader__img{float: left;width: 159rpx;height: 159rpx;}.delete{width: 40rpx;height: 40rpx;border-radius: 40rpx;line-height: 45rpx;/* color: rgb(255, 255, 255); */font-size: 26rpx;position: absolute;top: -10rpx;right: -10rpx;background-color: rgb(255, 255, 255);z-index: 99;text-align: center;border: 1rpx solid rgb(255, 255, 255);}.delete>text{position: absolute;top: -2rpx;right: -10rpx;}

uniapp上传（拍照、本地），预览，删除图片相关推荐

JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
ElementUI h5 移动端照片拍照本地预览旋转压缩并上传
文章目录调用摄像头拍照本地预览旋转压缩上传功能需求是移动端扫描二维码之后,跳转到在线网页进行自拍,然后上传拍照结果. 调用摄像头拍照在h5中,使用input type="file ...
struts上传word和excel文件到oracle,Struts文件上传,下载,重传,预览
[Struts2]☆★之文件上传,下载,重传,预览今日群里一兄弟问我能否给一份struts文件上传下载的例子,因为自己项目比较紧所以想在网上找些源码给他,但是纵观全网,写的都不是太全,这让新手使用 ...
iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
html上传头像及预览,JS实现上传头像并实时预览
说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是 ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...

uniapp上传（拍照、本地），预览，删除图片

uniapp上传（拍照、本地），预览，删除图片相关推荐

最新文章

热门文章