【uniapp 上传图片示例】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uniapp 上传图片示例】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下是 uniapp 上传图片的详细步骤示例：

定义一个方法，用于选择图片并上传：

methods: {
  chooseImage() {
    uni.chooseImage({
      count: 1, // 最多选择的图片数量
      sizeType: ['original', 'compressed'], // 可以指定原图或压缩图
      sourceType: ['album', 'camera'], // 可以指定图片来源是相册还是相机
      success: (res) => {
        this.uploadImage(res.tempFilePaths[0])
      }
    })
  },
  uploadImage(tempFilePath) {
    uni.uploadFile({
      url: 'https://example.com/upload', // 上传的服务器 URL
      filePath: tempFilePath, // 本地文件路径
      name: 'file', // 上传的文件名称
      formData: {}, // 其他要上传的数据
      success: (res) => {
        console.log(res)
      }
    })
  }
}

编写服务器端代码，用于接收上传的图片。具体实现方式可以根据后端语言和框架进行选择，以 PHP 语言为例：

<?php
$target_dir = "uploads/"; // 上传文件存储的目录
$target_file = $target_dir . basename($_FILES["file"]["name"]); // 上传文件的完整路径
$uploadOk = 1; // 标记是否上传成功，默认为成功

// 检查文件是否已经存在
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// 检查文件大小是否超过限制
if ($_FILES["file"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// 允许上传的文件类型
$allowedFileType = array("jpg", "jpeg", "png", "gif");
$fileType = pathinfo($target_file,PATHINFO_EXTENSION);

// 检查文件类型是否合法
if(!in_array($fileType, $allowedFileType)) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// 如果上传失败，则输出错误信息
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// 否则，将文件从临时目录移动到指定目录
} else {
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

注意：需要在服务器端部署一个支持文件上传的接口，代码示例中假定上传的接口为 https://example.com/upload。

在前端界面中添加一个按钮，并绑定选择图片的方法：

<template>
  <view>
    <button @tap="chooseImage">选择图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    // 选择图片并上传
    chooseImage() {
      // ...
    }
  }
}
</script>