Applet /vant UI to upload files

Applet /Vant UI Realize file upload

When I first came into contact with the small program upload , I have passed some experimental tests and recorded them for everyone to learn .

Use vant UI Official website ：Vant Weapp - Light weight 、 Reliable small program UI Component library

How not to use UI There may be some differences under the premise of the framework , But it does not affect the overall implementation details .

Import codes on the official website ：

      The first time I look at the above code, I have some doubts , I don't know very well . Now I am also ignorant , I mainly know the functions implemented, but I don't pay attention to the details of the implementation .afterRead Is the callback function for successful upload ,fileList Is a component that allows images to be echoed to uploaded files , You can set a fixed URL To achieve echo . 

    The following code is a partial modification of the above code to call the interface provided by the background .

Page({
  data: {
    fileList: [],
  },

  afterRead(event) {
    let that = this
    const { file } = event.detail;
    //  When setting  mutiple  by  true  when , file  In array format , Otherwise, it is in object format 
    wx.uploadFile({
      url: 'http://127.0.0.3/upload_file.php', // The address of the interface 
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success(res) {
        //  The upload is completed and needs to be updated  fileList
          let fileList = []
          let path = "http://127.0.0.3/" + res.data
          fileList.push({ url: path });
          console.log(fileList);
          that.setData({ fileList: fileList });
        // console.log(res.data);
      },
    });
  },

});

  there res.data Is the file name I provided , Use the method of concatenating strings to provide url Here it is fileList assignment . After the assignment is completed, the echo of the picture can be realized , The implementation details are shown in the following figure ：

  So that we can resume the experiment , Show the interface code in the background for everyone to learn .

<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
)  // file size B && ($_FILES["file"]["size"] < 2000000)
  {
  if ($_FILES["file"]["error"] > 0) // error 
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else // Upload files to the temporary system 
    {
    //echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    //echo "Type: " . $_FILES["file"]["type"] . "<br />";
    //echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    //echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists("upload/" . $_FILES["file"]["name"])) // File exists 
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else // Move the file to the specified location 
      {
      // get UUID
      $uuid = uuid();
      $uuid = str_replace('-','',$uuid);
      $extension = explode(".",$_FILES["file"]["name"] );
      $key = count($extension) - 1;
      $suffix = $extension[$key];
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $uuid.".".$suffix);
	  echo "upload/" . $uuid.".".$suffix; //Stored in: " . "upload/" . $uuid.$suffix
	  //echo "Stored in: " . "upload/". $uuid.".".$suffix;
      }
    }
  }
else
  {
  echo "Invalid file"; // Wrong file type 
  }
  
 function  uuid()  
{  
    $chars = md5(uniqid(mt_rand(), true));  
    $uuid = substr ( $chars, 0, 8 ) . '-'
            . substr ( $chars, 8, 4 ) . '-' 
            . substr ( $chars, 12, 4 ) . '-'
            . substr ( $chars, 16, 4 ) . '-'
            . substr ( $chars, 20, 12 );  
    return $uuid ;  
}
?>