写在前面

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

现在我们的项目中水果的信息已经能进行基础的增删改查了，但是水果的图片还没有，所以我们现在开始学习云开发的存储

云存储：上传图片

打开云开发控制台，选择存储，点击新建文件夹，新建一个名为“fruit”的文件夹，我们将上传的图片都保存在这个文件夹中

我将上传图片的按钮加在新增编辑页面，打开新增编辑页面：miniprogram\pages\fruit-edit-add\fruit-edit-add.wxml文件，增加如下代码，给所有的info_li都放到了info_ul下，并且添加了上传图片的按钮：

<view class="info_ul">
  ...
  <view class="info_li">
    <view class="info_title">水果图片</view>
    <view class="info_input">
      <image src="{{fileID}}" mode="widthFix" wx:if="{{fileID}}" class="img_box" />
      <view class="img_btn" bindtap="uploadImg" wx:else>
        上传图片
      </view>
    </view>
  </view>
</view>
<view class="btn_box">
  ...
</view>

同时编辑了css文件，新增、修改的代码如下：

.info_ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 200rpx;
  overflow: auto;
}
...
.btn_box {
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200rpx;
}
.img_btn {
  background-color: #409EFF;
  color: #ffffff;
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 8rpx;
}

.img_box {
  width: 300rpx;
  height: 300rpx;
}

同时在js文件里新增一个uploadImg方法，现在打开我们的编辑页面，效果如下，多了一个水果图片的栏位，和上传图片的按钮：

接下来是编写uploadImg方法，编写uploadImg方法的代码前，我们先新建miniprogram\utils\index.js文件，编写代码如下：

_chooseMedia方法封装选择图片和视频方法，可以传入以下字段：count（最多可以选择的文件个数）、mediaType（文件类型）、sourceType（图片和视频选择的来源）、maxDuration（拍摄视频最长拍摄时间）、camera（使用前置或后置摄像头），更多可以查看官方文档-选择图片或视频；

_uploadFile方法封装小程序端上传文件到云存储方法，传入的res参数为_chooseMedia方法返回的res，更多可以查看官方文档-上传文件；

_downloadFile方法封装小程序端下载文件的方法，传入的fileID为_uploadFile方法上传成功后返回的fileID，更多可以查看官方文档-下载文件；

export const _chooseMedia = (obj) => {
  const count = obj.count ? obj.count : 1
  const mediaType = obj.mediaType ? obj.mediaType : ['image', 'video']
  const sourceType = obj.sourceType ? obj.sourceType : ['album', 'camera']
  const maxDuration = obj.maxDuration ? obj.maxDuration : 30
  const camera = obj.camera ? obj.camera : 'back'
  return new Promise((resolve, resject) => {
    wx.chooseMedia({
      count: count, // 最多可以选择的文件个数
      mediaType: mediaType, // 文件类型(image:图片,video:视频)
      sourceType: sourceType, // 图片和视频选择的来源(album:相册,camera:相机)
      maxDuration: maxDuration, // 拍摄视频最长拍摄时间，单位秒
      camera: camera, // 使用前置或后置摄像头(back:后置,front:前置)
      success(res) {
        resolve(res)
      },
      fail(err) {
        resject(err)
      },
    })
  })
}

export const _uploadFile = (res) => {
  let tempFiles = res.tempFiles[0]
  let tempFilePath = tempFiles.tempFilePath
  let suffix = tempFilePath.split('.')[1]
  let fileType = tempFiles.fileType
  let timeStamp = new Date().getTime()
  return wx.cloud.uploadFile({
    cloudPath: `fruit/${fileType}${timeStamp}.${suffix}`,
    filePath: tempFilePath,
  })
}

export const _downloadFile = (fileID) => {
  return new Promise((resolve, reject) => {
    wx.cloud.downloadFile({
      fileID: fileID, // 文件 ID
      success: res => {
        // 返回临时文件路径
        resolve(res)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

写在最后

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

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

写在前面

云存储：上传图片

写在最后