本文实例为大家分享了微信小程序实现多图上传的具体代码,供大家参考,具体内容如下
前言
纯属是笔记,复用性太高,前后端封装的上传的多图方法
看一下效果图
index.html
<view class="imgs"> <block wx:for="{{ imgs }}" wx:key="{{ index }}"> <view class="img-box"> <image src="/UploadFiles/2021-04-02/{{ item }}">index.css
/* 上传照片 */ .imgs { margin-top: 20rpx; display: flex; flex-wrap: wrap; } .img-box { width: 100rpx; height: 100rpx; margin: 0 10rpx; flex-shink: 0; position: relative; margin-bottom: 10rpx; } .img-box .iconfont { position: absolute; top: -10rpx; right: 3rpx; font-size: 16rpx; width: 20rpx; height: 20rpx; line-height: 30rpx; text-align: center; border-radius: 50%; color: #fff; } .imgs image { width: 100rpx; height: 100rpx; } .add { margin-left: 10rpx; }util.js封装上传照片的方法
var app = getApp() // const host = "http://www.xxx.com" // const host = "http://192.168.1.200" // const host = "https://work.xxx.cn" // const host = "http://192.168.1.151" // const host = "http://192.168.1.9.8083" // const host ="http://192.168.1.244" const host = "http://192.168.10.9:8085"//郭 const formatTime = () => { const date = new Date() const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute].map(formatNumber).join(':') } const formatNumber = n => { n = n.toString() return n[1] ""; for (var i = 0; i < n; i++) { var id = Math.round(Math.random() * (chars.length - 1)); res += chars[id]; } return res; } // 打开地图选择器 var getPosition = (that) => { wx.chooseLocation({ success: (res) => { var newAddress = { addressName: res.name, address: res.address, latitude: res.latitude, //纬度 longitude: res.longitude //经度 } that.data.addresses.unshift(newAddress) that.setData({ addresses: that.data.addresses, chooseLocation: true }) wx.showToast({ title: '添加成功', icon: 'success' }) } }) } function userInfo() { //获取用户信息存储到全局变量 return new Promise((resolve, failed) => wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo, resolve(res) }, fail: err => { wx.showToast({ title: '网络错误', icon: 'none' }), failed() } })) } function login() { return new Promise((resolve, failed) => wx.login({ success: res => { app.globalData.header = { "Content-Type": "application/x-www-form-urlencoded", "Cookie": 'code=' + res.code, }, resolve(res) }, fail: err => { wx.showToast({ title: '网络错误', icon: 'none' }), failed() } })) } /** * [checkPhone 验证手机号] * @Author tomorrow-here * @DateTime 2018-12-20 * @param {string} phone [要验证的手机号字符串] * @return {boolean} [手机号正确,返回true,否则返回false] */ function checkPhone(phone) { if (!(/^1[34578]\d{9}$/.test(phone))) { wx.showToast({ title: '请输入正确的手机号!', icon: 'none' }) return false } else { return true } } module.exports = { formatTime, getPosition, post, get, login, isBlank, userInfo, generateMixed, uploadImage, pxToRpx, rpxToPx, checkPhone }index.js
import { uploadImg } from '../../utils/util.js'; const tool = require("../../utils/util.js") pages({ data:{ imgs:[], imgsArr:[],//装后台要的数据格式 } //多图 图片上传 uploadImg() { wx.chooseImage({ success: res => { tool.uploadImage("/returnFileInfo", res.tempFilePaths, 0, (res) => { var imgsrc = { src: JSON.parse(res.data).path,//后台返回的事json格式,需要转换 relateType: 2} this.data.imgsArr.push(imgsrc) this.setData({ imgsArr: this.data.imgsArr }, () => { console.log(this.data.imgsArr, '|imgsrc') }) }) this.setData({ imgs: [...this.data.imgs, ...res.tempFilePaths] }) } }) }, /** * @Author: tomorrow-here * @Date: 2019-1-22 * @Desc: 删除图片 */ close(e) { const index = e.currentTarget.dataset.index this.data.imgs.splice(index, 1) this.setData({ imgs: this.data.imgs }) }, })为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】