以下是 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>
完成以上步骤后,就可以在 uniapp 中成功上传图片了。