微信小程序实现多图上传

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

前言

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

看一下效果图

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.qd1.com"
// const host = "http://192.168.1.200"
// const host = "https://work.zez.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
 })
 },
 })

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

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

时间: 2020-06-18

微信小程序实现图片上传、删除和预览功能的方法

本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

微信小程序开发(二)图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的wxml代码 <view class="xd-container">

微信小程序图片选择、上传到服务器、预览(PHP)实现实例

微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

微信小程序-拍照或选择图片并上传文件

微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

微信小程序中上传图片并进行压缩的实现代码

小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

微信小程序上传图片功能(附后端代码)

几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OBJECT)实现 官方示例代码 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来

微信小程序实现上传图片功能

微信小程序图片上传,供大家参考,具体内容如下 先来看一下微信小程序的api 来看一下页面效果 查看大图 wxml文件代码: <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view clas

微信小程序实现文件、图片上传功能

本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下 在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用. 这里我说一下微信小程序如何实现图片的上传 1.在微信公众号平台设置uploadFile合法域名 点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名. 否则会出现以下错误. 2.使用wx.chooseImage和wx.uploadFile实现图片上传 代码如下 wx.chooseImage({ count: 1

微信小程序上传图片到服务器实例代码

上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

微信小程序多张图片上传功能

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',

微信小程序实现图片上传功能

本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下 前端:微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bindChooiceProduct: function () { var that = this; wx.chooseImage({ count: 3, //最多可以选择的图片总数 sizeType: ['compress

tp5实现微信小程序多图片上传到服务器功能

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: <!--选择图片 --> <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im

微信小程序实现同时上传多张图片

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码,供大家参考,具体内容如下 1.图片选择后,路径已经存入list中: data: { images: [], //选择的图片 }, 2.调用递归上传的方法: wx.chooseImage({ var that = this count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res){ var

微信小程序 网络API 上传、下载详解

微信小程序 网络API: 微信小程序 网络API发起请求 微信小程序 网络API 上传.下载 微信小程序 网络API Websocket wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器.客户端发起一个HTTPS POST请求,其中 Content-Type 为 multipart/form-data . OBJECT参数说明: 参数 类型 必填 说

微信小程序之批量上传并压缩图片的实例代码

具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取 这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da

Java微信小程序oss图片上传的实现方法

先将图片上传到服务器,再将服务器上的图片传入oss中 小程序js //启动上传等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }) //上传图片 wx.uploadFile({ url: '***********',//上传的路径(Java后台路径) filePath: tempFilePaths[0], name: 'file', success: function (re

微信小程序实现图片上传放大预览删除代码

本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 效果: image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { var that = this; var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function () {

小程序实现录音上传功能

本文实例为大家分享了小程序录音上传的具体代码,供大家参考,具体内容如下 首先我们可以先看一下微信小程序的API 这里有关于小程序录音的一些基本配置 index.wxml: <view class='progress_box' bindtap='openRecording' style="display:{{openRecordingdis}}"> <view class="progress_bgs"> <view class="