微信小程序——（上传、预览、保存、下载）图片和（查询）图片信息笔记

热爱前端，学习前端

已于 2023-05-19 19:59:03 修改

阅读量523

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序微信

于 2023-05-19 19:42:24 首次发布

本文链接：https://blog.csdn.net/weixin_61972561/article/details/130754096

版权

微信小程序专栏收录该内容

22 篇文章 2 订阅

订阅专栏

以下是.wxml代码

<!--pages/home/home.wxml-->
<!-- <text>pages/home/home.wxml</text> -->
<button bindtap="chooseImage" type="primary">上传图片</button>
<image src="{{url}}" mode="" />
<view class="btn-flex">
  <button bindtap="preview" type="default" size="mini">预览图片</button>
  <button bindtap="getImage" type="default" size="mini">图片信息</button>
  <button bindtap="save" type="default" size="mini">保存图片</button>
</view>
<view class="btn-flex">
  <button bindtap="download" type="warn" size="mini">下载图片</button>
</view>

以下是.wxss代码

.btn-flex{
  display: flex;
  justify-content: space-around;
}
button{
  margin-top: 30rpx;
}

以下是.js代码

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 用于保存图片路径
    url: ''
  },
  // 上传图片
  chooseImage() {
    wx.chooseMedia({
      success: (res) => {
        // console.log(res);
        this.setData({
          url: res.tempFiles[0].tempFilePath
        })
      }
    })
  },
  // 预览图片
  preview() {
    wx.previewImage({
      urls: [this.data.url,this.data.url]
    })
  },
  // 查询图片的宽高
  getImage() {
    wx.getImageInfo({
      src: this.data.url,
      success: (res) => {
        wx.showToast({
          icon: "success",
          title: "宽" + res.width + '；' + "高" + res.height,
        })
      }
    })
  },
  // 保存图片
  save(){
        wx.saveImageToPhotosAlbum({
          filePath: this.data.url,
          success: (res)=>{
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      },
    // 下载网络图片
    download(){
          wx.downloadFile({
            url: 'https://cdn.liyanhui.com/girl.jpg',
            success:(res)=>{
              console.log(res);
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success:(res)=>{
                  console.log('下载成功');
                }
              })
            }
          })
        },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})