element 图片上传

<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"]来判断有没有收 //到

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值