• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之上传文件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

配置好新浪云服务器后,接下来我们就写一个上传图片的功能来演示如何与服务器交互开发

首先创建一个干净的微信小程序项目

然后在index.wxml文件里写入:

<button bindtap=\'uploadimg\'>上传图片</button>
<image src=\'{{imgSrc}}\'></image>
 
在index.js里写入:
Page({
  data:{
    imgSrc:""
  },
  uploadimg:function(){
    var that = this;
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          imgSrc: tempFilePaths[0]
         });
        console.log(tempFilePaths);
      }
    })
  }
 
})

通过上面的代码我们先测试看看能不能取到本地图片

运行代码可以看到,可以正常显示图片

接下来就是写php服务器文件了

首先新建一个upload_handle.php文件在index目录下,然后里面代码如下:

<?php
  //sae存储文件的方法
  $s = new SaeStorage();
  ob_start();
  readfile($_FILES[\'fileup\'][\'tmp_name\']);
  $img = ob_get_contents();
  ob_end_clean();
  //获取文件大小
  $size = strlen($img);
  file_put_contents(SAE_TMP_PATH."/bg.jpg",$img);
  if($s->upload("test","test.jpg",SAE_TMP_PATH."/bg.jpg")){
    echo "上传成功";
  }else{
    echo "上传失败";
  }
?>

将这个文件打包成压缩文件然后上传到创建好的云仓库(新浪云版本库)

不用你解压,服务器会自动解压获取php文件。

下面再修改一下uploadimg方法:

  uploadimg:function(){
    var that = this;
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        // that.setData({
        //   imgSrc: tempFilePaths[0]
        // });
        // console.log(tempFilePaths);
        wx.uploadFile({
          url: \'https://example001.applinzi.com/upload_handle.php\',//这里放上你自己的二级域名地址
          filePath: tempFilePaths[0],
          name: \'fileup\',
          success:function(res){
            var data = res.data;
            console.log(data);
          },
          fail:function(){
            console.log(\'fail\');
          }
        })
      }
    })
  },

忘了提一点,还要配置一个存放上传文件的仓库storage的Bucket

然后重新运行程序,点击上传图片,可以看到控制台输出上传成功信息,然后去到Bucket里的test库可以看到图片已经上传上去了

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序上传Word文档、PDF、图片等文件发布时间:2022-07-18
下一篇:
微信小程序 - 组件传值给调用页面发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap