【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', // 上传的服务器 URLfilePath: 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>
完成以上步骤后，就可以在 uniapp 中成功上传图片了。