微信小程序实现多图上传


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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
document.createElement()用法
Mar 13 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JS解析XML实例分析
Jan 30 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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学习 运算符与运算符优先级
2008/06/15 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
JavaScript 特殊字符
2007/04/05 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python中__call__方法示例分析
2014/10/11 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
使用python加密自己的密码
2015/08/04 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
python定义具名元组实例操作
2021/02/28 Python
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
自荐信的格式
2014/03/10 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
主持人开幕词
2015/01/29 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫