标签：存储 console 预览 微信 ----- res 上传 tempFilePaths 图片

效果图

过程描述

点击上传按钮并且选择图片后上传到云存储，然后就能在页面上看到图片了

问题分析

为什么能看到图片：src=""
src又来自云存储
云存储的图片来自选择的图片

需求拆分

1.选择图片
2.上传到云存储

步骤

1.写页面

2.会用到这两个api

3.测试选择图片代码

4.上传至云存储

上传结果

5.完整代码

<view><button bindtap="upload">选择图片</button></view>
<view>预览图片</view>
<image src="{{uploadimg}}"></image>

// pages/news/news.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    uploadimg:''
  },
  upload(){
    var that=this;
    wx.chooseImage({
      count: 1,
      success (res) {
        // tempFilePath[0]可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;

        // 图片名称,为了让每次能上传上去
        const imgname=tempFilePaths[0].slice(11);
        console.log(tempFilePaths[0])

        // 上传图片至云存储
        wx.cloud.uploadFile({
          cloudPath: `img/${imgname}.png`, // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            
            that.setData({
              uploadimg:res.fileID
            })
          },
          fail: console.error
        })
      }
    })
  }
})

标签：存储,console,预览,微信,-----,res,上传,tempFilePaths,图片
来源： https://blog.csdn.net/qq_46065861/article/details/121031440

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。