微信小程序实战开发九:调用图片上传接口完成小程序图片选择并通过PHP上传到服务器。

编辑:睿儿发表于:2021-06-09 08:44:26 101 次阅读

从本地相册选择图片或使用相机拍照接口官方文档说明:

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

和它类似的还有 选择上传视频接口 

https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html

上传附件接口(只能选择微信信息中的文件)

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html


在小程序中使用 wx.chooseImage(Object object) 完成图片选择工作,使用 wx.previewImage 完成图片预览,使用 wx.uploadFile 完成图片从小程序中上传到服务器。

接口效果如下:

image.png


详细实现方式:

WXML 

<view class="weui-cells__title">作品图片:</view>
<view class="weui-uploader__bd">
  
      <view class="weui-uploader__files" id="uploaderFiles">
          <block wx:for="{{photo}}" wx:key="*this">
              <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                  <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
              </view>
          </block>
          
      </view>
      <view class="weui-uploader__input-box">
        <view class="weui-uploader__input" bindtap="chooseImage"></view>
      </view>                 
</view>


JS

//选择
chooseImage: function (e) {
  var that = this;
  wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          that.setData({
            photo: that.data.photo.concat(res.tempFilePaths)
          });
      }
  })
},
//预览
previewImage: function(e){
  wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.photo // 需要预览的图片http链接列表
  })
},
//上传
//图片批量上传方法
function uploadimg(data){
  console.log("this",data);
  var that=data.that,
      upphotoNames=data.upphotoNames?data.upphotoNames:'',
       i=data.i?data.i:0,//当前上传的哪张图片
       success=data.success?data.success:0,//上传成功的个数
       fail=data.fail?data.fail:0;//上传失败的个数
   wx.uploadFile({
         url: 'https://域名/上传文件.php', 
         filePath: data.path[i],
         name: 'file',//这里根据自己的实际情况改
         formData:null,//这里是上传图片时一起上传的数据
         success: (resp) => {
            success++;//图片上传成功,图片上传成功的变量+1
            //console.log(resp)
            //console.log("success",i);
             //把图片的值返回到这儿,然后保存在upphotoNames变量中
             wx.showLoading({
              mask:true,
               title: '上传第'+(i+1)+'张图片',
             });
             upphotoNames = upphotoNames + resp.data+","; 
             //这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
         },
         fail: (res) => {
             fail++;//图片上传失败,图片上传失败的变量+1
            // console.log('fail:'+i+"fail:"+fail);
         },
         complete: () => {
             //console.log("complete",i);
             i++;//这个图片执行完上传后,开始上传下一张
         if(i==data.path.length){   //当图片传完时,停止调用          
             console.log('执行完毕');
             console.log('成功:'+success+" 失败:"+fail);
             data.submitvalues.photo = upphotoNames;
             //console.log('上传内容为',data.submitvalues);
             wx.showLoading({
              mask:true,
               title: '图片上传中',
             });
             //return '成功:'+success+" 失败:"+fail;
         }else{//若图片还没有传完,则继续调用函数
             //console.log("complete2",i);
             data.i=i;
             data.success=success;
             data.fail=fail;
             data.upphotoNames = upphotoNames;
             uploadimg(data);
         }
             
         }
     });
 }



服务器PHP文件,保存图片接口   

上传文件.php
<?php
$code = $_FILES['file'];
$code = implode($code);
$textdata = $code;
//file_put_contents('./get.txt',$textdata);
//echo '{"errorMsg":"'.$code.'"}';
//$code = $_FILES['file'];//获取小程序传来的图片
if(is_uploaded_file($_FILES['file']['tmp_name'])) {  
    //把文件转存到你希望的目录(不要使用copy函数)  
    $uploaded_file=$_FILES['file']['tmp_name'];   
    $file_true_name=$_FILES['file']['name'];  
    $move_to_file="/upfiles/".time().rand(1,1000)."-".date("Y-m-d").substr($file_true_name,strrpos($file_true_name,"."));//strrops($file_true,".")查找“.”在字符串中最后一次出现的位置  
    //echo "$uploaded_file   $move_to_file";  
    if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312","..".$move_to_file))) {  
        //echo $_FILES['file']['name']."【上传成功】".date("Y-m-d H:i:sa"); 
        echo $move_to_file;
 
    } else {  
        echo '上传失败|'.$textdata."|";
 
    }  
} else {  
   echo '上传失败|'.$textdata."|";
}  
?>


原文地址:http://www.zjkdh.com/library/202106/91.html(张家口导航-睿儿知识库)

张家口睿儿网络科技有限公司版权所有