微信小程序上传图片单张

wxml代码

<view>
<image src=‘{{source}}‘ bindtap="uploadimg" style=‘width:200rpx;height:200rpx;background:red;‘>点击选择上传图</image>
</view>

js代码

var app = getApp()
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: ‘上传地址‘,
          filePath: tempFilePaths[0],
          name: ‘file‘,

          success: function (res) {
            //打印
            console.log(res.data)
          }
        })

      }
    })
  },
  onLoad: function () {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

后台获取php

$file = request()->file(‘file‘);

原文地址:https://www.cnblogs.com/notesbooks/p/9188802.html

时间: 2024-11-10 22:15:37

微信小程序上传图片单张的相关文章

微信小程序上传图片到COS腾讯云

功能需求:用户可以在评论中上传图片,图片保存到腾讯云COS上. 实现方法,微信小程序需要往后台传一个代表文件的参数file代表文件,借助MultipartFile获得文件的路径和文件名等信息. 关键实现代码: @RequestMapping(value = "/plugins/fileServer/fileservice/sales/admin", method = RequestMethod.POST) void postAdmin(@RequestParam(value = &qu

微信小程序上传图片到服务器实例

这一篇主要说头像 上传,以及修改保存的功能.本章节主要用的知识点有 1. wx.chooseImage 从本地相册选择图片或使用相机拍照. 2.wx.uploadFile 将本地资源上传到服务器. 3. 修改原来的小程序头像并保存,调用后台接口修改操作  第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject 我这里也贴出来了,不够

微信小程序上传图片(前端+PHP后端)

一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' /> 二.js文件 Page({ /** * 页面的初始数据 */ data: { //初始化为空 source

微信小程序上传图片

话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph' src='{{photos}}' bindtap='touchphoto' mode='aspectFit'> </image> <!--循环显示选中的图片--> <block wx:for="{{pics}}" wx:for-index="

微信小程序 - 上传图片组件

使用了ES8的async/await,注意正确导入“regenerate.js”的路径,使用说明在components/up-img/index.js 点击下载:图片上传组件 原文地址:https://www.cnblogs.com/cisum/p/10199507.html

微信小程序 上传图片

效果图  如上,js  如下,在页面循环图片就可以 /** * 选择图片 */ uploadImgAdd: function(e) { var imgs = this.data.imgs; wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { for (let j in res.tempFilePaths){ if (res.tempF

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the same task is working wx.uploadFile不能并行,因为wx.uploadFile是一个异步函数,所以循环的时候在安卓手机上会出现并行 解决的方法 做一个上传完的标识,然后 用递归算法进行上传 在上传成功的回调函数里面,直接递归,标识满足直接跳出,完成所有图片上传 贴上个

微信小程序多张图片上传

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',