Cara menggunakan PHP dan UniApp untuk memuat naik fail data

Cara menggunakan PHP dan UniApp untuk melaksanakan muat naik fail data

Dalam pembangunan aplikasi moden, muat naik fail adalah fungsi yang sangat biasa. Artikel ini akan memperkenalkan cara menggunakan PHP dan UniApp untuk memuat naik fail data, dan menyediakan contoh kod yang berkaitan untuk rujukan.

1. Pelaksanaan Bahagian Belakang (PHP)

1. Buat skrip PHP untuk muat naik fail, bernama upload.php.

<?php
// 设置允许跨域
header('Access-Control-Allow-Origin: *');

// 定义文件保存的目录
$uploadDir = './uploads/';

// 判断目录是否存在，若不存在则创建
if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

// 获取上传的文件
$file = $_FILES['file'];

// 获取文件名及其后缀
$fileName = $file['name'];
$ext = pathinfo($fileName, PATHINFO_EXTENSION);

// 生成新的文件名
$newFileName = uniqid() . '.' . $ext;

// 移动文件到指定目录
if (move_uploaded_file($file['tmp_name'], $uploadDir . $newFileName)) {
    echo json_encode([
        'code' => 0,
        'message' => '文件上传成功',
        'data' => [
            'fileName' => $fileName,
            'filePath' => $uploadDir . $newFileName
        ]
    ]);
} else {
    echo json_encode([
        'code' => -1,
        'message' => '文件上传失败'
    ]);
}
?>

2. Buat komponen muat naik fail dalam projek UniApp dan namakannya Upload.vue.

   <template>
     <div>
    <input type="file" ref="file" @change="handleFileChange" />
    <button @click="uploadFile">上传文件</button>
    <div v-if="uploadedFile">
      文件名：{{ uploadedFile.fileName }}
      <br />
      文件路径：{{ uploadedFile.filePath }}
    </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      file: null,
      uploadedFile: null
    };
     },
     methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.file);
   
      uni.request({
        url: 'http://your-domain/upload.php',
        method: 'POST',
        header: {
          'content-type': 'multipart/form-data'
        },
        data: formData,
        success: res => {
          if (res.statusCode === 200) {
            let data = res.data;
            if (data.code === 0) {
              this.uploadedFile = data.data;
            } else {
              uni.showToast({
                title: data.message,
                icon: 'none'
              });
            }
          }
        },
        fail: err => {
          uni.showToast({
            title: '文件上传失败',
            icon: 'none'
          });
        }
      });
    }
     }
   };
   </script>
   
   <style scoped>
   button {
     margin-top: 20px;
   }
   </style>

2. Gunakan langkah

1. untuk meletakkan fail upload.php dalam direktori pelayan yang ditentukan untuk memastikan persekitaran PHP dikonfigurasikan dengan betul.
2. Perkenalkan fail Upload.vue ke halaman dalam projek UniApp yang perlu menggunakan fungsi muat naik fail.
3. Gunakan teg de20aabbeae882d4be346795253a2bdfde41ef213893046953d652bee3f24d19 pada halaman untuk menggunakan fungsi muat naik fail.

Di atas adalah langkah operasi mudah dan contoh kod untuk menggunakan PHP dan UniApp untuk memuat naik fail data Pembangun boleh membuat pengubahsuaian dan sambungan yang sesuai mengikut keperluan sebenar. Semoga ia membantu semua orang!

Atas ialah kandungan terperinci Cara menggunakan PHP dan UniApp untuk memuat naik fail data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!