【uniapp 上传图片示例】

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

  1. 定义一个方法,用于选择图片并上传:
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)
      }
    })
  }
}
  1. 编写服务器端代码,用于接收上传的图片。具体实现方式可以根据后端语言和框架进行选择,以 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

  1. 在前端界面中添加一个按钮,并绑定选择图片的方法:
<template>
  <view>
    <button @tap="chooseImage">选择图片</button>
  </view>
</template>

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

完成以上步骤后,就可以在 uniapp 中成功上传图片了。

你可能感兴趣的:(uniapp,uni-app)