微信小程序批量上传图片(带php服务端源码!!!) ... - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序批量上传图片(带php服务端源码!!!) ...

发表时间:2021-4-22

发布人:葵宇科技

浏览次数:72

官方文档
https://developers.weixin.qq....

index.wxml

class="container">
  <button bindtap="imgupload">上传图片button>
view>

index.js

const app = getApp()

Page({
  data: {
   
  },
  imgupload(){
    wx.chooseImage({
      success (res) {
        // 获取选取的图片
        const tempFilePaths = res.tempFilePaths
        // 循环上传每一张选取的图片
        for (var i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: '你的上传服务端https接口',
            filePath: tempFilePaths[i],
            name: 'file',
            success (res){
              const msg = JSON.parse(res.data).msg;
              const url = JSON.parse(res.data).url;
              const code = JSON.parse(res.data).code;
              if(JSON.parse(res.data).code == 200){
                wx.showToast({
                  title: '成功',
                  icon: 'success',
                  duration: 1000
                })
                console.log(url)
              }else{
                wx.showToast({
                  title: '上传失败',
                  icon: 'error',
                  duration: 1000
                })
              }
              console.log(msg)
            }
          })
        }
      }
    })
  }
})

index.php


header("Content-Type:application/json");

// 允许上传的图片后缀
$allowedExts = array("jpeg", "jpg", "png");

// 后缀名
if ($allowedExts[0] == 'jpeg') {
    $hzm = 'jpg';
}else{
    $hzm = $allowedExts[0];
}

// 获取选择的文件
$temp = explode(".", $_FILES["file"]["name"]);

// 获取文件后缀名
$extension = end($temp);

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 10485760)   // 最大可以上传10MB
&& in_array($extension, $allowedExts))
{
    if ($_FILES["file"]["error"] > 0)
    {
        $result = array(
            'code' => 201,
            'msg' => '上传失败'.$_FILES["file"]["error"]
        );
    }
    else
    {
        
        // 判断当前目录下的 upload 目录是否存在该文件
        // 如果没有 upload 目录,你需要创建它,upload 目录权限为 777
        if (file_exists("upload/" . $_FILES["file"]["name"]))
        {
            $result = array(
                'code' => 202,
                'msg' => '文件已存在'
            );
        }
        else
        {
            // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
               $new_file = date("Y-m-d")."-".rand(10000,99999).".".$hzm;
            move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$new_file);
            $result = array(
                'code' => 200,
                'msg' => '上传成功',
                'url' => '这里是图片路径,自己修改你的后端代码路径'.$new_file
            );
        }
    }
}
else
{
    $result = array(
        'code' => 203,
        'msg' => '不支持的文件格式'
    );
}

echo json_encode($result,JSON_UNESCAPED_UNICODE);
?>

使用说明

(1)后端代码需要在里面修改你的代码上传到服务器所在的路径,才能正常显示上传成功的图片地址,例如你的代码上传到服务器根目录下img目录,那么你需要将路径修改为http://域名/img/upload
(2)还需要在index.php的同一目录下新建一个名为upload文件夹,这个是用来存放上传后的图片文件的。

Author:TANKING
Date:2021-04-14
WeChat:sansure2016
Web:http://www.likeyun.cn/

相关案例查看更多