写在前面

本篇文章是微信小程序开发入门的第二十篇，介绍小程序云开发存储之上传图片

上传图片

上篇文章我们封装了上传图片的各种方法，这篇文章开始用这些方法实现上传图片的功能

首先打开新增编辑的js文件：miniprogram\pages\fruit-edit-add\fruit-edit-add.js，编写uploadImg方法，代码如下，最上面引入封装的方法，在uploadImg方法中使用：

import {
  _chooseMedia,
  _uploadFile,
  _downloadFile
} from '../../utils/index'
Page({
  data: {
    name: '',
    intro: '',
    oriPrice: '',
    curPrice: '',
    vipPrice: '',
    quantity: '',
    unit: '',
    id: '',
    fileID: ''
  },
  ...
  uploadImg() {
    _chooseMedia({}).then(res => {
      _uploadFile(res).then(res => {
        this.setData({
          fileID: res.fileID
        })
      }).catch(error => {})
    })
  }
})

此时点击页面上的上传图片按钮，再打开云开发控制台-存储，可以看到多了记录：

再打开数据库编辑记录、新增记录的云函数，增加一个fileID字段，fileID表示图片存在云存储上的文件ID，文件：cloudfunctions\fruit\edit\index.js，修改代码如下：

      .update({
        data: {
          name: event.name,
          intro: event.intro,
          oriPrice: event.oriPrice,
          curPrice: event.curPrice,
          vipPrice: event.vipPrice,
          quantity: event.quantity,
          unit: event.unit,
          fileID: event.fileID, // 增加的代码
        },

文件：cloudfunctions\fruit\add\index.js也同样加上，重新上传并部署云函数后在小程序端编辑一条记录，比如我们给菠萝蜜添加一张图片，点击上传图片后选择图片，页面效果如下：

大家可以自行下载图片去试试看

微信图片_202304181449211.png

编辑成功后我们回到列表页，查看列表页调用的search云函数，可以看到查出来的数据中多了一个字段fileID：

此时修改列表页：miniprogram\pages\index\index.wxml文件代码，同时修改css文件，代码如下：

    <view class="furit_img">
      <image src="{{item.fileID}}" mode="widthFix" class="img_box"/>
    </view>
    
.img_box {
  width: 342rpx;
  height: 342rpx;
  border-radius: 8rpx;
}

此时再查看列表页，菠萝蜜的图片已经正常显示了，再将其他水果的图片也一一修改一下，最终效果如下：

详情页也需要显示水果图片，我们再将详情页的代码也修改一下，打开文件：fruit-detail.wxml和fruit-detail.wxss，分别增加如下代码：

  <view class="fruit_img">
    <image src="{{fruitDetail.fileID}}" mode="widthFix" class="img_box" />
  </view>
  
.img_box {
  width: 480rpx;
}

最终页面效果如下：

然后我们再进到编辑页面，发现还是上传图片的按钮，并不是图片，所以这里我们也要显示图片，在文件：fruit-edit-add.js中添加如下代码：

  onLoad(options) {
    if (options.info) {
      const info = JSON.parse(options.info)
      this.setData({
        name: info.name,
        intro: info.intro,
        oriPrice: info.oriPrice,
        curPrice: info.curPrice,
        vipPrice: info.vipPrice,
        quantity: info.quantity,
        unit: info.unit,
        id: info._id,
        fileID: info.fileID, // 添加的代码
      })
    }
  },

此时图片就正常显示了，但是又有一个问题，就是图片没办法编辑，所以我们打开文件：，给图片增加一个点击事件，代码如下：

 <image src="{{fileID}}" mode="widthFix" wx:if="{{fileID}}" class="img_box" bindtap="uploadImg" />

此时我们点击图片后，可以选择另一张图片，然后进行编辑，到此，上传图片的功能就开发完毕了

写在最后

以上就是小程序云开发存储之上传图片的全部内容

小程序入门20：小程序云开发存储之上传图片（下）

写在前面

上传图片

写在最后