微信小程序实现多图上传


Posted in Javascript onJune 19, 2020

本文实例为大家分享了微信小程序实现多图上传的具体代码,供大家参考,具体内容如下

前言

纯属是笔记,复用性太高,前后端封装的上传的多图方法

看一下效果图

微信小程序实现多图上传

index.html

<view class="imgs">
 <block wx:for="{{ imgs }}" wx:key="{{ index }}">
 <view class="img-box">
 <image src="{{ item }}" />
 <icon class="iconfont" size='18px' color="gray" data-index='{{ index }}' bind:tap="close" type='cancel'></icon>
 </view>
 </block>
 <image bind:tap="uploadImg" class="add" src="./upload.png" />
</view>

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] ? n : '0' + n
}
function pxToRpx(px) {
 const systemInfo = wx.getSystemInfoSync()
 return px / systemInfo.windowWidth * 750
}

function rpxToPx(rpx) {
 const systemInfo = wx.getSystemInfoSync()
 return rpx / 750 * systemInfo.windowWidth
}

function isBlank(str) {
 //判断对象是否为空值
 if (Object.prototype.toString.call(str) === '[object Undefined]') { //空
 return true
 } else if (
 Object.prototype.toString.call(str) === '[object String]' ||
 Object.prototype.toString.call(str) === '[object Array]') { //字条串或数组
 return str.length == 0 ? true : false
 } else if (Object.prototype.toString.call(str) === '[object Object]') {
 return JSON.stringify(str) == '{}' ? true : false
 } else {
 return true
 }

}

**//上传图片 //递归上传
function uploadImage(url, filePaths, i = 0, callback) {
 const length = filePaths.length
 wx.showLoading({
 title: '上传中..',
 mask: true
 })
 wx.uploadFile({
 header: app.globalData.header,
 url: host + url,
 filePath: filePaths[i],
 name: 'file', 
 success: res => {
 callback && callback(res)
 i++ 
 if (i < length) {
 this.uploadImage(url, filePaths, i, callback)
 } else {
 wx.hideLoading()
 wx.showToast({
 title: '上传完成!',
 })
 }
 },
 fail: res => {
 callback && callback(res)
 wx.hideLoading()
 wx.showToast({
 title: '上传失败!',
 icon: 'none'
 })
 }
 })
}**


//生成随机字符串
function generateMixed(n) {
 var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G']
 var res = "";
 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
 })
 },
 })

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
javascript实现tab切换特效
Nov 12 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
小程序表单认证布局及验证详解
Jun 19 #Javascript
小程序实现背景音乐播放和暂停
Jun 19 #Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 #Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 #Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
You might like
根德YB400的电路分析
2021/03/02 无线电
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
php debug 安装技巧
2011/04/30 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
师德承诺书
2015/01/20 职场文书
院系推荐意见
2015/06/05 职场文书
小学语文教学随笔
2015/08/14 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
详解非极大值抑制算法之Python实现
2021/06/28 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android