小程序图片上传及预览和删除

2024-05-30 19:09:34

效果：

1，xhtml

其中wx:for="{{picArr}}" 为所有的图片张数， src 为img 的图片路径；自定义data-src为当前点击的图片路劲（为预览做准备）自定义 data-list为所有的图片张数（为预览做准备）

<block wx:key="imgbox" wx:for="{{picArr}}">
<view class='add-pic'>
<image class='add-pic' data-list='{{picArr}}' data-src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}" src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}" data-index="{{index}}" bindtap="picPreview"></image>
<view class='img-de' bindtap="deleteImg" data-index="{{index}}">
<icon type="clear" size="20" />
</view>
</view>
</block>

//点击+号上传样式自己写
<view class='add-pic'>
<view class='btn' bindtap='chooseImg'>+</view>
</view>

2，JS

Page({
data{
           urlPrev: serverInterface.urlPrev,  //urlPrev为接口ip地址  let serverInterface = require("../../utils/server.js");
            picArr: [ ],
            arrPicSave:[ ],
       }
  })

// 上传图片
chooseImg: function () {
let that = this;
wx.chooseImage({
count: 9,
sizeType: [],
sourceType: ['album', 'camera'],
success: function (res) {
let tempFilePaths = res.tempFilePaths
for (let i = 0; i < tempFilePaths.length; i++) {
wx.uploadFile({
url: that.data.urlPrev + '/zdhx/WXA018/uploadTask',
filePath: tempFilePaths[i],
name: 'file',
formData: {
},
success: function (res) {
wx.hideLoading();
let imgeList = that.data.picArr.concat(JSON.parse(res.data).entity);
that.setData({
picArr: imgeList
});
}
});
wx.showLoading({
title: '正在上传...',
})
}
},
fail: function (res) {
console.log(res, '失败');
},
complete: function (res) { },
})
},

// 删除图片
deleteImg: function (e) {
let that = this;
let index = e.currentTarget.dataset.index;
let images = that.data.picArr;
images.splice(index, 1);
that.setData({
picArr: images
});
},
// 图片预览
picPreview: function (event) {
let _this = this;
let urlPrev = _this.data.urlPrev
// 获取当前点击src，以及接口返回的所有src 就是xhtml里的data-src和data-list
var src = event.currentTarget.dataset.src;
var imgList = event.currentTarget.dataset.list;
// 每次点击图片，先清空数组
_this.setData({
arrPicSave: []
})
// 遍历多少张图片，然后字符串转数组并添加到arrPicSave中
for (var i = 0; i < imgList.length; i++) {
var forEachData = urlPrev + '/zdhx/WXA018/getImg?name=' + imgList[i].nowURL.split(',')
_this.data.arrPicSave.push(forEachData);
}
// 预览
wx.previewImage({
current: src, //当前点击预览的图片
urls: _this.data.arrPicSave //供左右侧滑的所有图片
})
},

小程序图片上传及预览和删除相关推荐

微信小程序图片上传和预览以及取消上传图片案例
前言: 做小程序项目遇到一个需求,就是上传图片和预览,以及取消指定的图片,其实这个功能挺好搞的,借助微信官方的API结合实现,只不过注意一点细节.不多说了直接上代码和效果图.大家可以直接复制我的代码进 ...
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...

最新文章

热门文章