用PHP接收element上传的图片,Element-ui实现图片上传和表单提交功能,打开表单弹框,显示上传图片...
时间: 2024-05-15 13:14:23 浏览: 72
首先,你需要使用Element-UI的upload组件来实现图片上传功能。具体步骤如下:
1. 在Vue组件中引入Element-UI的upload组件,例如:
```
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="handleBeforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
```
其中,`action`属性指定了图片上传的接口地址,`on-preview`和`on-remove`属性分别指定了预览和删除图片的方法,`before-upload`属性指定了上传图片前的处理方法。
2. 在Vue组件的methods中定义上传图片相关的方法,例如:
```
methods: {
handlePreview(file) {
console.log('预览图片:', file);
},
handleRemove(file, fileList) {
console.log('移除图片:', file, fileList);
},
handleBeforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500K = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt500K) {
this.$message.error('上传图片大小不能超过 500KB!');
}
return isJPG && isLt500K;
}
}
```
其中,`handlePreview`方法用于预览图片,`handleRemove`方法用于删除图片,`handleBeforeUpload`方法用于对上传的图片进行校验。
3. 在服务器端使用PHP编写图片上传接口,例如:
```
<?php
$file = $_FILES['file'];
$fileName = $file['name'];
$fileTmpName = $file['tmp_name'];
$fileSize = $file['size'];
$fileError = $file['error'];
$fileType = $file['type'];
$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png');
if (in_array($fileActualExt, $allowed)) {
if ($fileError === 0) {
if ($fileSize < 500000) {
$fileNameNew = uniqid('', true) . "." . $fileActualExt;
$fileDestination = 'uploads/' . $fileNameNew;
move_uploaded_file($fileTmpName, $fileDestination);
echo "文件上传成功!";
} else {
echo "文件大小超过限制!";
}
} else {
echo "上传文件时发生错误!";
}
} else {
echo "不支持的文件类型!";
}
?>
```
其中,`$file = $_FILES['file']`用于获取上传的文件,`$allowed`数组用于指定允许上传的文件类型,`move_uploaded_file`函数用于将上传的文件保存到指定目录下。
最后,你可以在表单提交的时候将上传的图片路径一起提交到服务器端进行保存,具体实现可以根据你的业务需求进行定制。
阅读全文