Gunakan uniapp untuk melaksanakan fungsi muat naik fail

uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja vue.js, yang boleh mencapai kesan penulisan sekali dan digunakan pada berbilang platform. Dalam aplikasi praktikal, muat naik fail adalah keperluan biasa, seperti muat naik imej, muat naik video, dsb. Artikel ini akan memperkenalkan secara terperinci cara menggunakan uniapp untuk melaksanakan fungsi muat naik fail dan memberikan contoh kod khusus.

Idea asas untuk melaksanakan muat naik fail ialah: bungkus dahulu fail yang dipilih di bahagian hadapan, dan kemudian hantar ke bahagian belakang untuk diproses. Dalam uniapp, anda boleh menggunakan kaedah uni.uploadFile yang disediakan secara rasmi untuk memuat naik fail. Kaedah uni.uploadFile boleh memuat naik sumber tempatan ke pelayan jauh Proses muat naik menggunakan muat naik berpecah-belah untuk mencapai muat naik fail yang stabil dan boleh dipercayai.

Sebelum melaksanakan fungsi muat naik fail, anda perlu memasang persekitaran uniapp-cli dan versi rangka kerja uniapp yang sepadan.

Seterusnya, mari kita lihat pelaksanaan kod khusus.

Bahagian hadapan:

Di halaman hujung hadapan, anda perlu menetapkan borang muat naik fail dan butang muat naik. Kodnya adalah seperti berikut:

1. Tetapkan borang muat naik fail dalam halaman HTML:

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

Antaranya, tag <input type="file"> menetapkan entri untuk fail muat naik Klik butang muat naik , kotak dialog pemilihan fail sistem akan dipanggil secara automatik. <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. Tetapkan butang muat naik dalam halaman HTML:

rrreee

Tetapkan acara @click pada butang Apabila pengguna mengklik butang muat naik, fungsi uploadFile dicetuskan untuk melaksanakan operasi muat naik.

3 Tulis fungsi uploadFile dalam fail JS:

rrreee

Antaranya, uni.chooseImage digunakan untuk membuka album sistem, dan uni.showLoading digunakan. untuk memaparkan pemuatan dalam kotak muat naik, uni.uploadFile digunakan untuk menghantar permintaan untuk memuat naik fail. 🎜🎜Pengenalan kepada parameter khusus uni.uploadFile: 🎜

• url: alamat antara muka muat naik
• filePath: laluan setempat bagi yang dimuat naik fail;
• nama: nilai nama fail yang dimuat naik, antara muka bahagian belakang perlu menerima parameter ini
• kejayaan: fungsi panggil balik selepas muat naik berjaya.

🎜Dengan cara ini, kod bahagian hadapan selesai. 🎜🎜Bahagian belakang: 🎜🎜Di bahagian belakang, maklumat fail yang dimuat naik perlu diproses. Di sini kita mengambil bahasa PHP sebagai contoh untuk menulis logik pemprosesan yang sepadan. 🎜🎜1. Cipta fail upload.php untuk pemprosesan muat naik: 🎜rrreee🎜 Antaranya, fungsi move_uploaded_file digunakan untuk memindahkan fail sementara ke direktori yang ditentukan. Fail yang dimuat naik di sini akan dinamakan semula dan menggunakan nama fail asal boleh menyebabkan konflik. Perlu diingatkan bahawa direktori muat naik perlu dibuat pada pelayan terlebih dahulu. 🎜🎜2 Mulakan perkhidmatan PHP sebagai pelayan belakang untuk memantau permintaan muat naik. Pasang xampp atau wampserver secara setempat Selepas bermula, masukkan localhost/xxx/upload.php dalam penyemak imbas untuk mengakses perkhidmatan muat naik, di mana xxx ialah lokasi folder tempat upload.php disimpan. 🎜🎜Dengan cara ini, kod untuk bahagian belakang selesai, dan fail boleh dimuat naik ke direktori yang ditentukan melalui alamat pelayan. 🎜🎜Ringkasan: 🎜🎜Artikel ini memperkenalkan langkah khusus menggunakan uniapp untuk melaksanakan fungsi muat naik fail, yang terutamanya merangkumi bahagian hadapan dan bahagian belakang. Sediakan borang muat naik fail dan butang muat naik melalui bahagian hadapan, dan tulis fungsi muat naik dalam fail JS bahagian belakang menggunakan PHP untuk menulis perkhidmatan muat naik, memantau permintaan muat naik dan memuat naik fail ke direktori yang ditentukan; . Apabila bahagian hadapan menghantar permintaan muat naik ke bahagian belakang, menggunakan kaedah uni.uploadFile untuk memuat naik fail boleh menyediakan perkhidmatan muat naik yang stabil dan boleh dipercayai. 🎜

Atas ialah kandungan terperinci Gunakan uniapp untuk melaksanakan fungsi muat naik fail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!