美文网首页初识小程序
选择图片和上传图片

选择图片和上传图片

作者: 洗耳恭听_kai | 来源:发表于2020-10-15 02:15 被阅读0次

引言:在微信小程序中选择手机图片并上传到后台

主要步骤:

  • 使用wx.chooseImage来选择图片
  • 使用wx.uploadFile来上传图片

选择图片

<button bindtap='handleChooseAlbum' size="mini" >选择图片</button>
handleChooseAlbum(){
        //系统API,让用户在相册中选择图片(或者拍照)
        wx.chooseImage({
            success : (res) => {
              //1、取出路径
        const path = res.tempFilePaths
        console.log(res)

              //2、设置imagePath
              this.setData({
                imagePath : path
        })
            }
        })
  },

上传图片(多张)

uploadimg:function(shoper_id){
    var that = this
    for (var i = 0; i < that.data.imagePath.length; i++) {
      var imgUrl = that.data.imagePath[i];
      wx.uploadFile({
        //php 服务器地址
        url: config.url + 'shoper/saveimg',
        filePath: imgUrl,
        name: 'file',
        formData: {
          'shoper_id': shoper_id
        },
        success: function (res) {
          console.log("success");
        },
        fail: function (res) {
          console.log("error");
        }
      })
    }
  },

后台

//存储图片
    public function saveimg()
    {
        //处理图片
        $imgs = $_FILES['file'];
        $shoper_id = $_REQUEST['shoper_id'];

        if($imgs){
            $destination = $_SERVER['DOCUMENT_ROOT'].'/static/upload/images';
            //创建文件夹(按年月)
            $name = "/shoper/".date("Ym")."/";
            $ymname = $destination.$name;
            if(!is_dir($ymname)){
                mkdir($ymname,0777,true);
            }
            //文件名称
            $filename = date("YmdHis",time()).'-'.substr(md5($imgs['name']),0,10).'.jpg';
            //存储到文件夹,$imgs['tmp_name']是小程序端传来的图片临时路径
            move_uploaded_file($imgs['tmp_name'], $ymname.'/' . iconv("UTF-8", "gb2312", $filename));
            //存储到数据库
            $img_url = '/upload/images'.$name.$filename;
            $insert = [
                'filename' => $img_url,
                'shoper_id' => $shoper_id,
                'add_time' => time()
            ];
            Db::name('shoper_images')->insert($insert);
        }
    }

相关文章

  • 选择图片和上传图片

    引言:在微信小程序中选择手机图片并上传到后台 主要步骤: 使用wx.chooseImage来选择图片 使用wx.u...

  • 微信小程序-图片加水印并保存

    业务需求:选择图片添加水印,并保存,或上传 技术要点:画布,图片选择、上传、保存 首先需要一个图片容器和一个画布 ...

  • 回看设置页面

    页面加载时 检测版本,检测头像 选择图片添加上传图片 1选择图片的插件还不会写 2上传图片要调用HTTPservi...

  • Android图片选择框架

    支持图库选择和拍照的图片选择框架 之前在android的学习过程中,用了几次图片上传,其中就使用了图片选择和拍照返...

  • React 使用antd imagePicker选择并上传图片

    注意:imagePicker只是图片选择器,一般用于上传图片前的文件选择操作,但不包括图片上传的功能. 因为封装了...

  • Section-8 项目实战之上传图片模块

    Lesson-1 上传图片需求分析 上传图片的需求场景 用户头像 封面图片 问题和回答中的图片 话题图片 上传图片...

  • vue+koa做图片上传

    vue图片上传,使用elementui上传组件前端选择图片后,立即上传(也可以手动上传)后台koa监听请求路由,处...

  • bootstrap inputfile选择一张图点击上传成功后图

    今天遇到一个奇怪的问题,bootstrap inputfile 上传图片,选择一张图片,点击图片下面那个小按钮上传...

  • js拼图思路(3X3)

    1.要实现的内容: 图片上传 切割图片 移动文件选择图标和游戏图片框 打乱图片存储的顺序 移动乱序的图片 交换要移...

  • 微信小程序使用云调用多图片违规验证

    使用场景:评论是多图片上传验证图片是否违法违规 流程 选择图片 -》获取图片路径 -》 读取图片data -》 验...

网友评论

    本文标题:选择图片和上传图片

    本文链接:https://www.haomeiwen.com/subject/rqjlpktx.html