前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、uniapp点击上传图片

以下是代码示例仅供观看学习

二、使用步骤

1.html部分

代码如下（示例）：

<view><view class="container"><!-- 上传图片 -->
<view class="supplement-report-pic"><view class="report-pic-item" wx:for="{{previewArr}}"  wx:for-item="image"><image src="{{image}}" data-src="{{image}}"  bindtap="previewImage"></image><view class="pic-item-close" data-pic="{{image}}" bindtap="delReportPic"><image src="../../resources/img/icon/supplement_report_close_ico.png"></image></view></view><view class="report-pic-item" bindtap="chooseClientPic"><!-- 这个白色框不是网络路劲 --><image src="../../resources/img/icon/supplement_report_add_ico.png"></image></view><view class="clearfix"></view>
</view>
</view>
</view>

2.js部分

代码如下（示例）：

// pages/detup/detup.jsPage({data: {previewArr: [], // 保存选择的图片uploadBackFile: '', // 上传成功服务器接口返回的文件地址xianshiy:false},/*** 删除上传图片*/delReportPic: function (options) {let that = this;console.log(options);let pic = options.currentTarget.dataset.pic;let previewArrs = that.data.previewArr;that.removeArrElement(pic);that.setData({previewArr: previewArrs})},/*** 删除指定元素*/removeArrElement: function (val) {console.log(1111);let that = this;let previewArrs = that.data.previewArr;var index = previewArrs.indexOf(val);if (index > -1) {previewArrs.splice(index, 1);}},/*** 选择图片*/chooseClientPic: function () {let that = this;var  arr=that.data.previewArrif(arr.length<=3){wx.chooseImage({count: 3 ,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: res => {let tempFilePaths = res.tempFilePaths;console.log('这是啥·1'+tempFilePaths);let previewArr=[];that.setData({previewArr: that.data.previewArr.concat(tempFilePaths), })}});}else{console.log("图片过多");}},// 预览图片previewImage: function (e) {console.log("123",e);var current = e.target.dataset.srcconsole.log("图片索引", current);wx.previewImage({current: current,urls: this.data.previewArr})},})

3.css部分

代码如下(示例):

.container{padding: 0rpx;margin: 0rpx;
}
.supplement-report-pic{width: 100%;float: left;
}.report-pic-item{width: calc(20.33% - 10rpx);float: left;margin: 0rpx 0rpx 0rpx 0rpx;position: relative;border: 1px solid #ccc;
}
.report-pic-item>image{width: 100%;height: 165rpx;
}
.pic-item-close{position: absolute;/* height: 20rpx; */right: 5rpx;top: 5rpx;background-color: rgb(120, 207, 109);border-radius:23rpx;
}
.pic-item-close image{width: 46rpx;height: 35rpx;
}

图片示例

uniapp点击上传图片,预览图片,删除图片相关推荐

uniapp上传、预览、删除图片
效果图如下: 代码如下所示: <template><view class="upload-img"><image src="/static/ ...
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能学习目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
使用GridView实现仿微信发朋友圈添加图片，点击预览、删除图片
最近在项目中有一个用户反馈的功能中要上传图片,和微信发朋友圈添加图片的功能其实有点类似,所以我想着用GridView来实现这个功能,整个过程也很简单,画不多说,详细步骤见下: 1.先来看MainAct ...
利用微信的weui框架上传、预览和删除图片
jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/ 需求:需要在微信公众号网页添加上传图片功能技术选型:实现上传图片功 ...
uni-app上传图片(选择，预览，删除图片)
用uni-app做项目时,上传图片的功能需求应该是在正常不过的了.最近有几个项目都有遇到,所以想总结一下.所用到的api都很简单. 功能需求功能需求如列表所示,视图展现如图所示,代码如下.点击相框按 ...
anguarjs 上传图片预览_前端图片上传那些事儿
本文转自:掘金作者:chess 前言本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上 ...
微信开发php插件下载图片,微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法...
参数描述 appId公众号的唯一标识应用id timestamp生成签名的时间戳 nonceStr生成签名的随机串 signature签名上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们 ...
小程序上传图片到七牛云（支持多张上传，预览，删除）
以下为wxml (使用的vant小程序ui框架,需在json文件里自行引入) <view class='clearFloat'><view class='upload_title'& ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...

uniapp点击上传图片,预览图片,删除图片

文章目录

前言

一、uniapp点击上传图片

二、使用步骤

1.html部分

2.js部分

3.css部分

uniapp点击上传图片,预览图片,删除图片相关推荐

最新文章

热门文章