开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序图片上传功能(PHP后端)

简介: 微信小程序图片上传功能(PHP后端)
+关注继续查看

效果图


前端效果图


image


后端


image


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


代码


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();

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信小程序通用功能设计和实现(下)
微信小程序通用功能设计和实现(下)
37 0
微信小程序显示圆形图片
微信中头像形状都是矩形的。我们的页面大部分要求头像要显示圆形,例如 做法 在.wxss文件中,添加即可 .avatar{ height: 50px; width: 50px; border-radius: 25px; } 在.
1867 0
微信小程序中实现车牌输入功能
微信小程序中实现车牌输入功能
146 0
张小龙首次全面阐述小程序,宣布1月9日上线(附微信公开课演讲全文)
在今天的微信公开课广州PRO版上,“微信之父”张小龙宣布:希望小程序1月9日正式上线!同时,他解答了大家最关心的8个关于小程序的疑问: 1.小程序不用下载,没有入口,只有二维码; 2.小程序没有订阅,只有访问; 3.小程序没有商店,只有有限搜索; 4.小程序不会主动推荐,只有社交推荐; 5.没有PUSH,只有有限通知; 6.没有朋友圈分享,只能分享到聊天和群; 7.小程序并不能做戏; 8.小程序与公众号是什么关系?答案是没有关系!   以下为张小龙的演讲内容: 各位朋友,大家早上好!我是张小龙。
1025 0
微信小程序获取位置信息
微信小程序获取位置信息
38 0
【愚公系列】2022年04月 微信小程序-image图片
【愚公系列】2022年04月 微信小程序-image图片
19 0
小程序实现图片上传,预览以及图片base64位处理
小程序实现图片上传,预览以及图片base64位处理
149 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载