如何利用PHP和UniApp實現資料的檔案上傳

如何利用PHP和UniApp實作資料的檔案上傳

在現代化的應用程式開發中，檔案上傳是非常常見的功能。本文將介紹如何利用PHP和UniApp實作資料的檔案上傳，並提供相關程式碼範例供參考。

一、後端實作(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>

二、使用步驟

1. 將upload.php檔案放置在伺服器的指定目錄下，確保PHP環境配置正確。
2. 將Upload.vue檔案引入UniApp專案中的需要使用檔案上傳功能的頁面。
3. 在頁面中使用de20aabbeae882d4be346795253a2bdfde41ef213893046953d652bee3f24d19標籤即可使用檔案上傳功能。

以上就是利用PHP和UniApp實作資料的檔案上傳的簡單操作步驟和程式碼範例，開發者可依實際需求進行適當的修改和擴充。希望對大家有幫助！

以上是如何利用PHP和UniApp實現資料的檔案上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！