微信小程序> 微信小程序之图片的上传与下载

微信小程序之图片的上传与下载

浏览量:1297 时间: 来源:今安在

大家都知道,小程序有着大量的api,文件(图片)的上传也是其中之一.
给大家分享一下个人的用法.我所做的是一个类似空间日志的图文发布以及混排.

首先是图片的选择,使用wx.chooseImage,将选中的图片存放在一个数组里面,便于上传.

chooseImage: function () {        var that = this;        wx.chooseImage({            success: function (res) {                console.log(res);                for (var i = 0; i < res.tempFilePaths.length; i++){                  var newList = that.data.imagesList.concat(res.tempFilePaths[i]);                }                that.setData({                    imagesList: newList,                })            },        })    },

然后就是上传图片了,使用的是wx.uploadFile
将图片数组里面的图片取出以此上传,

//上传图片    up_img: function (img,date,index) {      var _this = this;      wx.uploadFile({        url: 'https://这里是服务器域名/diary/setImage.php', //接口        filePath: img,//图片路径        name: 'file',        formData: {//存放图片的相关信息          blog_id: date,          img_index: index,        },        success: function (res) {          if (res.data == '200') {            wx.showToast({              title: '上传成功',            })          } else if (res.data == '404') {            wx.showToast({              title: '上传失败',            })          }        },        fail: function (error) {          console.log(error);        }      })

在后端再进行接收与保存.

require 'connect.php'; date_default_timezone_set("Asia/Shanghai"); //设置时区$code = $_FILES['file'];//获取小程序传来的图片if(is_uploaded_file($_FILES['file']['tmp_name'])) {      //把文件转存到你希望的目录     $uploaded_file=$_FILES['file']['tmp_name'];      $username = "image";    //动态的创建一个文件夹      $user_path=$_SERVER['DOCUMENT_ROOT']."/diary/".$username;      //判断是否已经有这个文件夹      if(!file_exists($user_path)) {          mkdir($user_path);   }      $file_true_name=$_FILES['file']['name'];//得到图片的文件名    $name = time().rand(1,1000)."-".date("Y-m-d");//取当前时间戳+一个4位随机数然后再加上当前日期作为图片的新的文件名        $type = substr($file_true_name,strrpos($file_true_name,"."));//截取图片的类型后缀(.jpg,.png等等)        //strrops($file_true,".")查找“.”在字符串中最后一次出现的位置          $image = $name.$type;//组成新名称    $move_to_file=$user_path."/".$name.$type;//    if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file))) { //图片保存成功的同时,将改名之后的图片名称存放至数据库,方便前端下载    $sql="insert into image values('".$_POST['blog_id']."','".$image."','".$_POST['img_index']."')";            $result=$mysqli->query($sql);                        if($result) {                echo '200';            }else{                //不存在信息就返回false                echo '404';            }        echo $_FILES['file']['name']."--上传成功".date("Y-m-d H:i:sa");     } else {          echo "上传失败".date("Y-m-d H:i:sa");      }  } else {      echo "上传失败".date("Y-m-d H:i:sa");  }

在后端保存完之后,前端使用wx.request进行不同请求访问即可获取图片信息.

这是数据库里面存的信息.

小程序

这是文件夹里面存的信息

小程序

返回路径的时候记得做以下这个操作

$path = 'https://这里是服务器域名/diary/image/';while ($row = $result->fetch_assoc()){$row['img_url'] = $path.$row['img_url'];$results[]=$row;}

只有完整的路径才能访问到图片.如果有某些地方存在问题,希望各位大牛指点…

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎