PHP と UniApp を使用してデータ ファイルをアップロードする方法

PHP と UniApp を使用してデータ ファイルのアップロードを実装する方法

現代のアプリケーション開発では、ファイルのアップロードは非常に一般的な機能です。この記事では、PHP と UniApp を使用してデータ ファイルをアップロードする方法を紹介し、参考として関連するコード例を示します。

1. バックエンド実装 (PHP)

1. ファイルアップロード用の PHP スクリプトを作成し、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. UniApp プロジェクトにファイル アップロード コンポーネントを作成し、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. 手順

   1. を使用して、upload.php ファイルをサーバーの指定されたディレクトリに配置し、PHP 環境が正しく構成されていることを確認します。
   2. ファイル アップロード機能を使用する必要がある UniApp プロジェクトのページに、Upload.vue ファイルを導入します。
   3. ファイルのアップロード機能を使用するには、ページ上の <upload-file></upload-file> タグを使用します。

   上記は、PHP と UniApp を使用してデータ ファイルをアップロードするための簡単な操作手順とコード例であり、開発者は実際のニーズに応じて適切な修正や拡張を行うことができます。お役に立てれば幸いです!

   以上がPHP と UniApp を使用してデータ ファイルをアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。