微信小程序实现多图上传


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 相关文章推荐
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 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
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
简析Python的闭包和装饰器
2016/02/26 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
如何在sublime编辑器中安装python
2020/05/20 Python
C语言基础笔试题
2013/04/27 面试题
后进生转化工作制度
2014/01/17 职场文书
实习生求职自荐信
2014/02/07 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
中介业务员岗位职责
2014/04/09 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
刘胡兰观后感
2015/06/16 职场文书