微信小程序之多张图片上传到PHP后台

多张图片上传到PHP后台并存入数据库

微信前台代码

<!--pages/demo4/demo4.wxml-->
<view class="container">
    <view class="list">
        <button type="primary" class="button" bindtap="uploadImg">点击上传</button>
    </view>
</view>

多张图片递归上传js

// pages/demo4/demo4.js
Page({

 /**
  * 页面的初始数据
  */
 data: {

 },


 /**
   * 上传照片//选择图片时限制9张，如需超过9张，同理亦可参照此方法上传多张照片
   */
 uploadImg: function () {
  var that = this;
  wx.chooseImage({
   count: 2,
   sizeType: ['original', 'compressed'],
   sourceType: ['album', 'camera'],
   success: function (res) {
    var successUp = 0; //成功
    var failUp = 0; //失败
    var length = res.tempFilePaths.length; //总数
    var count = 0; //第几张
    that.uploadOneByOne(res.tempFilePaths, successUp, failUp, count, length);
   },
  });
 },


 /**
   * 采用递归的方式上传多张
   */
 uploadOneByOne(imgPaths, successUp, failUp, count, length) {
  var that = this;
  wx.showLoading({
   title: '正在上传第' + count + '张',
  })
  wx.uploadFile({
   url: 'http://49.122.47.146/php-yuyin/upload.php', //仅为示例，非真实的接口地址
   filePath: imgPaths[count],
   name: 'file',//示例，使用顺序给文件命名
   success: function (e) {
    successUp++;//成功+1
   },
   fail: function (e) {
    failUp++;//失败+1
   },
   complete: function (e) {
    count++;//下一张
    if (count == length) {
     //上传完毕，作一下提示
     console.log('上传成功' + successUp + ',' + '失败' + failUp);
     wx.showToast({
      title: '上传成功' + successUp,
      icon: 'success',
      duration: 2000
     })
    } else {
     //递归调用，上传下一张
     that.uploadOneByOne(imgPaths, successUp, failUp, count, length);
     console.log('正在上传第' + count + '张');
    }
   }
  })
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 }
})

单张图片上传js

// pages/demo4/demo4.js
Page({

 /**
  * 页面的初始数据
  */
 data: {

 },

 uploadImg:function(){
  wx.chooseImage({
   success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
     url: 'http://49.122.47.146/php-yuyin/upload.php', //仅为示例，非真实的接口地址
     filePath: tempFilePaths[0],
     name: 'file',
     formData: {
      'user': 'test'
     },
     success(res) {
      const data = res.data
      //do something
     }
    })
   }
  })
 },


 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 }
})

PHP后台代码

<?php
/**
 * Created by PhpStorm.
 * Date: 2019/10/11
 * Time: 16:41
 */
//设置编码utf—8
header('Content -type:text/html;charset=utf-8');


//连接数据库
$con = new mysqli("localhost","root","root","wxphp");
//定义sql语句

//接收数据并移动到uploads目录下
$file = "./uploads/".$_FILES['file']['name'];

if(move_uploaded_file($_FILES['file']['tmp_name'],$file)){
    //定义sql语句
    $sql = "INSERT INTO user(file) values('$file');";
    //发送sql语句
    $res = mysqli_query($con,$sql);
    echo "上传成功";

}else{
    echo "上传失败";
}