微信小程序实现图片上传(清晰版)

这篇具有很好参考价值的文章主要介绍了微信小程序实现图片上传(清晰版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 在wxml文件中添加一个按钮和一个image标签用于显示上传的图片
    <view>
      <button bindtap="chooseImage">选择图片</button>
      <image src="{{imageUrl}}" />
    </view>
  2. 在js文件中添加选择图片和上传图片的方法
    Page({
      data: {
        imageUrl: ''
      },
      chooseImage() {
        wx.chooseImage({
          count: 1, // 可选择的图片数量
          sizeType: ['compressed'], // 压缩图片
          sourceType: ['album', 'camera'], // 来源:相册或相机
          success:  (res)=> {
            // 将选择的图片上传到服务器
            this.uploadImage(res.tempFilePaths[0]);
          }
        })
      },
      uploadImage(imagePath) {
        wx.uploadFile({
          url: '服务器地址', // 上传图片的接口地址
          filePath: imagePath, // 图片文件路径
          name: 'image', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
          success: (res) => {
            // 上传成功后,将服务器返回的图片地址更新到image标签中
            this.setData({
              imageUrl: res.data
            });
          },
          fail: function (res) {
            console.log(res);
          }
        })
      }
    })

文章来源地址https://www.toymoban.com/news/detail-415324.html

到了这里,关于微信小程序实现图片上传(清晰版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序上传文件(可传 word、excel、ppt、视频、图片……)

    近期做技术调研时发现微信官方支持文件上传了,这里记录一下 官方 API:wx.chooseMessageFile(Object object) 交互:从微信聊天里选择文件(选一个好友/群聊,从你们聊天记录里的文件里选) 点红框是预览,点右上角圆圈才是选中(昨天做技术调研时点红圈部分是预览,搞得我还以

    2024年02月11日
    浏览(74)
  • 微信小程序对上传图片进行裁剪实现记录

    媒体 / 图片 / wx.cropImage (qq.com) 小程序图片裁剪插件 image-cropper | 微信开放社区 (qq.com) 1、将插件项目中image-cropper文件内容复制到本地项目中的compoent中 wxml: js:  json: wxss:根据自己需求调整    2、然后在要引用插件的页面json文件中添加image-cropper 3、在引用插件的wxml文件中引

    2024年04月16日
    浏览(56)
  • uniApp移动端-H5-微信小程序上传文件(图片,文档和视频等)

    封装了一个插件可直接使用: 插件地址:uniApp移动端-H5-小程序上传文件(图片,文档和视频等),插件可直接用Hbuilderx导入示例项目查看, 实现方法: H5内部是使用uni-app官方内部方法uni.chooseFile 小程序端因hybrid不能使用本地HTML,所以插件提供的是uni-app官方内部方法wx.cho

    2024年02月12日
    浏览(59)
  • 微信小程序上传文件(图片)至阿里云OSS,包含后端代码示例。

    ps:本文较为详细,需要有耐心的阅读,要是图片看不清楚可以下载到本地放大查看。 写这篇博客的主要目的是因为serverless架构下直接上传图片只能转base64,且body大小有限制 一、在阿里云创建RAM用户与角色 1.为什么要使用RAM用户? 云账号 AccessKey 是您访问阿里云 API 的密钥,具

    2024年02月04日
    浏览(49)
  • 微信小程序-多图片上传(基于Promise.all实现)

    如你所了解到的,微信小程序的wx.uploadFile每次仅支持单文件上传。但在实际的应用场景中往往有多文件上传的需求。因此我打算用Promise.all对wx.uploadFile进行一层封装,让其能够实现多文件上传。 说在前面:若你了解Promise.all的用法.那么你一定知道这样封装的结果: 同时上传多

    2023年04月09日
    浏览(48)
  • 微信小程序云开发之云存储(实现图片上传和下载)

    我们经常将文件(音频、图片、压缩包、文档)存储在网上,我们的云开发平台为开发者提供“云存储”空间,开发者只需将文件上传,就可以得到这个文件的下载地址和File ID。 代码如下(示例): 效果: wxml示例: js代码示例: 代码如下(示例): tips:上边的链接下载地

    2024年02月11日
    浏览(97)
  • uniapp微信小程序实现大文件上传 分片上传 进度条

    一、安装   二、页面引入  三、实现功能(重要)         1.获取图片的路径         2.设置分片的大小         3.将数据放入 四、实现上传进度条 全部函数js 五、修改npm的源码,处理请求源码中请求所携带的参数问题,以及报错处理(重要) 修改npm后的源码。

    2024年02月03日
    浏览(52)
  • asp微信小程序上传多张照片功能,wx.chooseMedia和wx.uploadFile配合实现多张图片上传

    由于项目需要使用asp,因此用asp写了一个接收微信小程序上传多张照片的功能,例用的是wx.chooseMedia和wx.uploadFile配合,循环上传多张照片,微信小程序现在好像最多可以上传20张,闲话不好上代码,需要的可以直接下载,前后台都有,本文只放前端代码: 本文实现微信小程序

    2024年02月11日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包