微信小程序图片上传功能（PHP后端）

港控/mmm° 2022-11-13 00:51 227阅读 0赞

### 文章目录 ###

*  效果图
 *   *  前端效果图
     *  后端
 *  代码
 *   *  wxml
     *  js
     *  php

# 效果图 #

## 前端效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

## 后端 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]

功能比较简单，解释都在注释里，这里就不进行讲解了

# 代码 #

## wxml ##

<view class="main"> 
    <image src='{ {source}}'/>
    <button bindtap="uploadimg">拍照或上传图片</button> 
    </view>

## js ##

Page({ 
      data:{ 
        source:"",
      },
      // 上传图片
      uploadimg:function(){ 
        var that = this;
        // 从本地相册选择图片或者使用相机拍照
        wx.chooseImage({ 
          count: 1,
          sizeType:['original', 'compressed'] ,
          sourceType:['album', 'camera'],
          success:function(res){ 
            console.log("选择图片相应"+res);
            that.setData({ 
              source:res.tempFilePaths,
            });
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
            var tempFilePaths = res.tempFilePaths; 
            wx.uploadFile({  
              url: 'https://www.yyl.plus/PestIdentify/api/', 
              filePath: tempFilePaths[0], 
              name: 'file', 
              success:function(res){  
                //打印
                console.log("响应数据：");
                console.log(res.data);
              },
            })
          }
        })
    
      }
    })

## php ##

<?php 
    // 上传图片 
    function uploadimg() {  
        $file = $_FILES['file'];
        // $file = request()->file('file');
        if ($file) {  
            //var_dump($file);
            // 获取文件后缀名
            $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
            $target = '../public/upload/weixin/' . uniqid() . '.' . $ext;
            // 转移图片地址
            if (!move_uploaded_file($file['tmp_name'], $target)) { 
                $GLOBALS['error_message'] = '上传图片失败';
                echo error_message;
            }
            $res = [
                'errCode'=>0,
                'error_message'=>'图片上传成功',
                'file'=>$target
            ];
            $data = json_encode($res);
            var_dump($data);  
        }
    }
    
    
    uploadimg();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/e779aa03c3774c148c24355fff944b35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221022/eab94ee8e8b24b8c8bbb40e7fef00cf4.png