zoukankan      html  css  js  c++  java
  • 微信小程序上传图片(前端+PHP后端)

    一、wxml文件

    1
    2
    3
    4
    5
    6
    7
    <text>上传图片</text>
    <view>
     
    <button bindtap="uploadimg">点击选择上传图</button>
     
    </view>
    <image src='{{source}}' style='600rpx; height:600rpx' />

    二、js文件

    复制代码
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
      //初始化为空 source:'' }, /** * 上传图片 */ uploadimg:function(){ var that = this; wx.chooseImage({ //从本地相册选择图片或使用相机拍照 count: 1, // 默认9 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: 'http://www.website.com/home/api/uploadimg', filePath: tempFilePaths[0], name: 'file', success:function(res){ //打印 console.log(res.data) } }) } }) },
    )}
    复制代码

    三、PHP后端代码

    复制代码
    // 上传图片
        public function uploadimg()
        {
             $file = request()->file('file');
            if ($file) {
                $info = $file->move('public/upload/weixin/');
                if ($info) {
                    $file = $info->getSaveName();
                    $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file];
                    return json($res);
                }
            }
           
        }
    复制代码

    运行结果:

    console打印结果:

     此时表示上传成功!

    转自:https://www.cnblogs.com/zxf100/p/8075569.html

  • 相关阅读:
    lodash函数库----difference
    lodash 函数库-
    lodash函数库 -- chunk
    document.selection.createRange方法----获取用户选择文本
    复制到剪切板 clipboard
    下载图片到本地
    H5(11表格案例:小说排行榜)
    H5(10HTML标签学习)
    H5(09综合案例圣诞老人介绍)
    H5(08常用标签02,绝对,相对路径)
  • 原文地址:https://www.cnblogs.com/zmdComeOn/p/11765682.html
Copyright © 2011-2022 走看看