Use uniapp to implement file upload function

uniapp is a cross-platform application development framework based on the vue.js framework, which can achieve the effect of writing once and deploying on multiple platforms. In practical applications, file upload is a common requirement, such as image upload, video upload, etc. This article will introduce in detail how to use uniapp to implement the file upload function and provide specific code examples.

The basic idea of ​​​​implementing file upload is: first package the selected file on the front end, and then send it to the back end for processing. In uniapp, you can use the officially provided uni.uploadFile method to upload files. The uni.uploadFile method can upload local resources to the remote server. The upload process uses fragmented upload to achieve stable and reliable file upload.

Before implementing the file upload function, you need to install the uniapp-cli environment and the corresponding uniapp framework version.

Next, let’s take a look at the specific code implementation.

Front-end part:

In the front-end page, you need to set the file upload form and the upload button. The code is as follows:

1. Set the file upload form in the HTML page:

<form>
  <input type="file" id="fileInput" multiple="multiple">
</form>

Among them, the <input type="file"> tag sets the file upload form When you click the upload button, the system file selection dialog box will automatically pop up.

2. Set the upload button in the HTML page:

<button type="button" @click="uploadFile">上传</button>

Set the @click event on the button. When the user clicks the upload button, uploadFile# is triggered. ##Function to perform upload operation.

3. Write the uploadFile function in the JS file:

uploadFile() {
  uni.chooseImage({
    count: 1, // 可上传的图片数量，为1表示单张上传
    success: function (res) {
      uni.showLoading({
        title: "上传中，请稍候..."
      });
      uni.uploadFile({
        url: "http://localhost:8081/upload.php", // 上传接口地址
        filePath: res.tempFilePaths[0], // 上传文件的本地路径
        name: "uploadfile", // 上传文件对应的 key 值
        success: function (result) {
          uni.hideLoading();
          console.log(result);
          uni.showToast({
            title: "上传成功!",
            duration: 2000
          });
        }
      });
    }
  });
}

Among them,

uni.chooseImage is used to open the system album, and uni.showLoading is used To display the loading box during upload, uni.uploadFile is used to send a request to upload a file.

Introduction to the specific parameters of

uni.uploadFile:

url: the address of the upload interface;
• filePath: the local path of the uploaded file ;
• name: The name value of the uploaded file, the backend interface needs to receive this parameter;
• success: The callback function after the upload is successful.

In this way, the front-end code is completed.

Backend part:

In the backend, the uploaded file information needs to be processed. Here we take the PHP language as an example to write the corresponding processing logic.

1. Create the upload.php file for upload processing:

<?php
  $uploaddir = './upload/'; //文件上传的目录，需要事先创建好
  $filename = $_FILES['uploadfile']['name']; // 获取上传文件的名称
  $uploadfile = $uploaddir . $filename;
  if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $uploadfile)) { //上传成功
    echo json_encode(array(
      'success' => true,
      'msg' => '上传成功！'
    ));
  } 
  else { //上传失败
    echo json_encode(array(
      'success' => false,
      'msg' => '上传失败！'
    ));
  }
?>

Among them, the

move_uploaded_file function is used to move temporary files to the specified directory. Files uploaded here will be renamed, and using the original file name may cause conflicts. It should be noted that the upload directory needs to be created on the server in advance.

2. Start a PHP service as a back-end server to monitor upload requests. Install xampp or wampserver locally. After starting, enter

localhost/xxx/upload.php in the browser to access the upload service, where xxx is the folder location where upload.php is stored.

In this way, the code for the backend part is completed, and the file can be uploaded to the specified directory through the server address.

Summary:

This article introduces the specific steps of using uniapp to implement the file upload function, which mainly includes front-end and back-end parts. Set up the file upload form and upload button through the front-end, and write the upload function in the JS file; the back-end uses PHP to write the upload service, monitor the upload request, and upload the file to the specified directory. When the front end sends an upload request to the back end, using the uni.uploadFile method to upload files can provide a stable and reliable upload service.

The above is the detailed content of Use uniapp to implement file upload function. For more information, please follow other related articles on the PHP Chinese website!