Utilisez Uniapp pour implémenter la fonction de téléchargement de fichiers

uniapp est un framework de développement d'applications multiplateforme basé sur le framework vue.js, qui peut obtenir l'effet d'écrire une seule fois et de se déployer sur plusieurs plates-formes. Dans les applications pratiques, le téléchargement de fichiers est une exigence courante, comme le téléchargement d'images, le téléchargement de vidéos, etc. Cet article présentera en détail comment utiliser uniapp pour implémenter la fonction de téléchargement de fichiers et fournira des exemples de code spécifiques.

L'idée de base de​​la mise en œuvre du téléchargement de fichiers est la suivante : commencez par empaqueter le fichier sélectionné sur le front-end, puis envoyez-le au back-end pour traitement. Dans uniapp, vous pouvez utiliser la méthode uni.uploadFile officiellement fournie pour télécharger des fichiers. La méthode uni.uploadFile peut télécharger des ressources locales sur le serveur distant. Le processus de téléchargement utilise un téléchargement fragmenté pour obtenir un téléchargement de fichiers stable et fiable.

Avant d'implémenter la fonction de téléchargement de fichiers, vous devez installer l'environnement uniapp-cli et la version du framework uniapp correspondante.

Ensuite, examinons l'implémentation spécifique du code.

Partie front-end :

Dans la page front-end, vous devez définir le formulaire de téléchargement de fichier et le bouton de téléchargement. Le code est le suivant :

1. Définissez le formulaire de téléchargement de fichier dans la page HTML :

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

Parmi eux, la balise <input type="file"> définit l'entrée du fichier. télécharger Cliquez sur le bouton de téléchargement, la boîte de dialogue de sélection des fichiers système sera automatiquement appelée. <input type="file">标签设置了文件上传的入口，在点击上传按钮时，会自动调出系统文件选择对话框。

2、在HTML页面中设置上传按钮：

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

在按钮上设置@click事件，当用户点击上传按钮时，触发uploadFile函数进行上传操作。

3、在JS文件中编写uploadFile函数：

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
          });
        }
      });
    }
  });
}

其中，uni.chooseImage用于打开系统相册，uni.showLoading用于展示上传中的加载框，uni.uploadFile用于发送上传文件的请求。

关于uni.uploadFile具体参数的介绍：

• url：上传接口的地址；
• filePath：上传文件的本地路径；
• name：上传文件的 name 值，后端接口中需要接收该参数；
• success：上传成功后的回调函数。

这样，前端部分的代码就完成了。

后端部分：

在后端，需要处理上传过来的文件信息。这里我们以PHP语言为例，编写相应的处理逻辑。

1、创建upload.php文件，用于上传处理：

<?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' => '上传失败！'
    ));
  }
?>

其中，move_uploaded_file函数用于移动临时文件到指定目录。这里上传的文件会被重命名，使用原始文件名可能会产生冲突。需要注意的是，上传目录需要在服务器上提前创建好。

2、启动一个PHP服务，作为后端服务器，监听上传请求。在本地安装xampp或wampserver，启动后，在浏览器中输入localhost/xxx/upload.php

2. Définissez le bouton de téléchargement dans la page HTML :

rrreee

Définissez l'événement @click sur le bouton Lorsque l'utilisateur clique sur le bouton de téléchargement, la fonction uploadFile. est déclenché pour effectuer l'opération de téléchargement.

3. Écrivez la fonction uploadFile dans le fichier JS :

rrreee

Parmi eux, uni.chooseImage est utilisé pour ouvrir l'album système, et uni.showLoading est utilisé. pour afficher le chargement dans la boîte de téléchargement, uni.uploadFile est utilisé pour envoyer une demande de téléchargement d'un fichier. 🎜🎜Introduction aux paramètres spécifiques de uni.uploadFile : 🎜

• url : l'adresse de l'interface de téléchargement
• filePath : le chemin local du uploadé ; file;
• name : la valeur du nom du fichier téléchargé, l'interface backend doit recevoir ce paramètre
• success : la fonction de rappel une fois le téléchargement réussi ;

🎜De cette façon, le code front-end est complété. 🎜🎜Partie backend : 🎜🎜Dans le backend, les informations du fichier téléchargé doivent être traitées. Nous prenons ici le langage PHP comme exemple pour écrire la logique de traitement correspondante. 🎜🎜1. Créez le fichier upload.php pour le traitement du téléchargement : 🎜rrreee🎜 Parmi eux, la fonction move_uploaded_file est utilisée pour déplacer les fichiers temporaires vers le répertoire spécifié. Les fichiers téléchargés ici seront renommés et l'utilisation du nom de fichier d'origine peut provoquer des conflits. Il convient de noter que le répertoire de téléchargement doit être créé au préalable sur le serveur. 🎜🎜2. Démarrez un service PHP en tant que serveur back-end pour surveiller les demandes de téléchargement. Installez xampp ou wampserver localement. Après le démarrage, entrez localhost/xxx/upload.php dans le navigateur pour accéder au service de téléchargement, où xxx est l'emplacement du dossier où upload.php est stocké. 🎜🎜De cette façon, le code de la partie backend est terminé et le fichier peut être téléchargé dans le répertoire spécifié via l'adresse du serveur. 🎜🎜Résumé : 🎜🎜Cet article présente les étapes spécifiques de l'utilisation d'uniapp pour implémenter la fonction de téléchargement de fichiers, qui comprend principalement des parties front-end et back-end. Configurez le formulaire de téléchargement de fichier et le bouton de téléchargement via le front-end, et écrivez la fonction de téléchargement dans le fichier JS ; le back-end utilise PHP pour écrire le service de téléchargement, surveiller la demande de téléchargement et télécharger le fichier dans le répertoire spécifié ; . Lorsque le front-end envoie une demande de téléchargement au back-end, l'utilisation de la méthode uni.uploadFile pour télécharger des fichiers peut fournir un service de téléchargement stable et fiable. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!