<div style="float: left;width: 300px;">
<el-upload class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="item" list-type="picture"
:http-request="upload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
<!--用http-request来写上传函数 绑定这个属性以后action则没有用了 为符合格式 里面写一些字符串即可-->
<!--:file-list绑定的必须是一个数组 让我们想起始页面什么也不显示的时候 删掉这个绑定即可-->
js部分
handleRemove(file, fileList) {
let url=file.url.substring(5)
let params = JSON.stringify({
str: url
});
axios.post("/api/photoDelate.php", params).then((res) => {console.log(res)});
},
//删除函数 点击×号 执行这个函数 我自己写的 PHP 删除服务器中url的图片
upload2(item) {
let _this = this;
let formData = new FormData();
formData.append("uploadfile", item.file);
axios.post("/api/shengchanxian.php", formData).then(
res => {
console.log(res);
if (res.data.ret == "20000" || res.data.ret == 20000) {
this.imgKey = res.data.data;
console.log(this.imgKey);
_this.downLoad();
} else {
console.log("0000");
}
},
res => {
console.log(res);
}
);
},
//上传函数 点击确认上传执行的函数
//formData.append("uploadfile", item.file);表单数据对象 添加一个属性叫uploadfile的 值是
//item.file的这一个一个属性 内容是文件
看一下PHP 的接收形式和情况(接收到一个什么东西)
<?php
header("Content-type: text/html; charset=utf-8");
if ($_FILES["uploadfile"]["error"] > 0)
{
echo "错误:" . $_FILES["uploadfile"]["error"] . "<br>";
}
else
{
echo "上传文件名: " . $_FILES["uploadfile"]["name"] . "<br>";
echo "文件类型: " . $_FILES["uploadfile"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["uploadfile"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["uploadfile"]["tmp_name"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["uploadfile"]["name"]);
$extension = end($temp); // 获取文件后缀名
if ((($_FILES["uploadfile"]["type"] == "image/gif")
|| ($_FILES["uploadfile"]["type"] == "image/jpeg")
|| ($_FILES["uploadfile"]["type"] == "image/jpg")
|| ($_FILES["uploadfile"]["type"] == "image/pjpeg")
|| ($_FILES["uploadfile"]["type"] == "image/x-png")
|| ($_FILES["uploadfile"]["type"] == "image/png"))
&& ($_FILES["uploadfile"]["size"] < 204800) // 小于 200 kb
&& in_array($extension, $allowedExts))
{
if ($_FILES["uploadfile"]["error"] > 0)
{
echo "错误:: " . $_FILES["uploadfile"]["error"] . "<br>";
}
else
{
echo "上传文件名: " . $_FILES["uploadfile"]["name"] . "<br>";
echo "文件类型: " . $_FILES["uploadfile"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["uploadfile"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["uploadfile"]["tmp_name"];
// 判断当期目录下的 upload 目录是否存在该文件
// 存在则可以直接替换也可以先删除在替换
// 如果没有 upload 目录,你需要创建它,upload 目录权限为 777
if (file_exists("shengchanxian/" .$_FILES["uploadfile"]["name"]))
{
echo $_FILES["uploadfile"]["name"] . " 文件已经存在。 ";
}
else
{
// 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
// 可以定义保存的目录和保存在服务器的名字
move_uploaded_file($_FILES["uploadfile"]["tmp_name"], "shengchanxian/" . $_FILES["uploadfile"]["name"]);
echo "文件存储在: " . "shengchanxian/" . $_FILES["uploadfile"]["name"];
}
}
}
else
{
echo "非法的文件格式";
}
?>
//由此可见收到的是一个叫uploadfile的files文件 用$_FILES["uploadfile"]["error"]来判断有没有收 //到