Applet cloud development upload pictures to cloud storage

After learning about cloud development of small programs , Encountered the common image upload in development , Today's simple record summarizes how to upload pictures to cloud storage in cloud development .

Here are two simple cases , One is to select images and upload them directly to cloud storage , Such as replacing avatars is in line with this situation . The second is after selecting pictures , Click the submit button and upload to cloud storage , It's like adding pictures to a circle of friends post or a form Click the Publish button to upload .

Next, let's look at the first case , Choose pictures to upload directly to cloud storage ：

The effect is as follows ：

  Code ：

<view>
         
  <image src="{
   {images}}"></image>
           
</view>
<view bindtap="upload"> Upload </view>

upload(){
    let that=this;
    wx.chooseImage({// Asynchronous methods 
      count: 9,// Select the maximum number of pictures 
      sizeType:['original', 'compressed'],// Selected picture size   Original picture , Compressed graph 
      sourceType:['album','camera'],// Photo album selection , Camera taking 
      success(res){
        //tempFilePaths It can be used as a picture label src attribute 
        const tempFilePaths = res.tempFilePaths
         console.log(" Selection successful ",res)

         for(let i=0; i < tempFilePaths.length; i++){// Cyclic upload of multiple pictures 
          wx.cloud.uploadFile({// Upload to wechat cloud storage 
            cloudPath:'myImage/' + new Date().getTime() + "_" +  Math.floor(Math.random()*1000) + ".jpg",// Use timestamp plus random number as the name of the image uploaded to the cloud 
            filePath:tempFilePaths[i],//  Local file path 
            success: res => {
              //  Return file  ID
              console.log(" Upload successful ",res.fileID)
              that.setData({
                images:res.fileID// Get the image uploaded to the cloud and display it on the page 
              })
              wx.showToast({
                title: ' Upload successful ',
              })
            }
          })
        }

      }
    })
  },

After the upload , Click the cloud storage panel refresh to see the newly uploaded image

  Next, let's look at the second case , When you select a picture , Click the submit button and upload to cloud storage .

The renderings are as follows ：

  The code is as follows ：

<form action="" bindsubmit="addBtn">
<view>
      
   <view class="imgFlex">
     <block wx:for="{
   {images}}" wx:key="*this" >
        <view data-index="{
   {index}}" class="item_img">
          <image src="{
   {item}}"></image>
        </view>
      </block>
    </view>
    <view bindtap="upload"> Upload </view>
</view>
 <button type="primary" form-type="submit"> Submit </button>
 <button type="primary" form-type="reset"> Reset </button>
</form>

//index.js
//import WxValidate from '../../utils/WxValidate';
const app = getApp()
const db = wx.cloud.database()// Call the database reference of the default cloud environment 
Page({
  data: {
    images:[],// Select Picture 
    images_success: [],// Upload the cloud storage address array after cloud storage 
    images_success_size:0,// The number of successful image uploads 
  },
  onLoad(){
  
},
 
  upload(){
    let that=this;
    wx.chooseImage({// Asynchronous methods 
      count: 9,// Select the maximum number of pictures 
      sizeType:['original', 'compressed'],// Selected picture size   Original picture , Compressed graph 
      sourceType:['album','camera'],// Photo album selection , Camera taking 
      success(res){
        //const tempFilePaths = res.tempFilePaths
        that.setData({
          images: res.tempFilePaths
         });
         console.log(" Selection successful ",res)
      }
    })
  },
  
  uploadImage(index){
    let that=this
      wx.cloud.uploadFile({// Upload to wechat cloud storage 
        cloudPath:'myImage/' + new Date().getTime() + "_" +  Math.floor(Math.random()*1000) + ".jpg",// Name the image with timestamp and random number 
        filePath:that.data.images[index],//  Local file path 
        success: res => {
          //  Return file  ID
          console.log(" Upload successful ",res.fileID)
          that.data.images_success[index] = res.fileID;
          that.data.images_success_size = that.data.images_success_size+1;

          if(that.data.images_success_size == that.data.images.length){
            console.log(" Upload successful ：", that.data.images_success)
          } else {
            that.uploadImage(index+1)
          }
        },
        fail: err =>{
          that.setData({
            images_success:[],
            images_success_size:0
          })
          wx.showToast({
            icon:'none',
            title: ' Upload failed , Please upload again ',
          })
        }
      })

  },
 
 // Submit the form and add it to the database 
 addBtn: function(e){
  let that=this;
  if(that.data.images.length > 0){//1、 Determine whether there are pictures 
    that.setData({
      //3、 Initialize a length for the uploaded image , The array uploaded successfully is consistent with the existing array 
      images_success:that.data.images
    })
    that.uploadImage(0)//2、 Upload the first picture first when there is a picture 
    }
   
    
 },
  
})

The above is about applets Code for uploading pictures to cloud storage , There are comments in the code , No more explanation here , Practice first . First attempt to write , Welcome to comment