elementUI图片上传前端及后端写法例子

0623911

说明

我们平时自己开发项目的时候会用到图片上传，这里就把之前写的一个例子整理一下，使用elementUI完成图片上传

 

后端写法

<?php
/**
 * 图片上传接口
 * @author 捕风阁 www.osuu.net
 * @time 2020.5.20
 */
$key=$_POST['key'];
$upkey=1234;//实际开发中应从数据库获取
if($key != $upkey){
    //这里是一个简略的key验证，防止接口被人抓取乱用
  $result = array("status" => 100, "message" => "上传失败,上传key错误", "data" =>null);
}else{
    // 允许上传的图片后缀
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    // echo $_FILES["file"]["size"];
    $extension = end($temp);     // 获取文件后缀名
    if($_FILES["file"]["size"] > 512000){// 大于 500 kb
      $result = array("status" => 100, "message" => "图片不能大于500kb", "data" =>null);
    }else if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && in_array($extension, $allowedExts)){
      if ($_FILES["file"]["error"] > 0){
        $result = array("status" => 100, "message" => "上传失败", "data" =>null);
      }else{
            //上传后的图片以时间戳重新命名
        move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . time().".png");
        // echo(time().".png");
        $result = array("status" => 200, "message" => "上传成功", "data" => time().".png");
      }
    }else{
      $result = array("status" => 100, "message" => "图片格式不支持", "data" =>null);
    }
}
echo(json_encode($result)); 
?>
<?php
/**
 * 图片上传接口
 * @author 捕风阁 www.osuu.net
 * @time 2020.5.20
 */
$key=$_POST['key'];
$upkey=1234;//实际开发中应从数据库获取

if($key != $upkey){
    //这里是一个简略的key验证，防止接口被人抓取乱用
  $result = array("status" => 100, "message" => "上传失败,上传key错误", "data" =>null);
}else{
    // 允许上传的图片后缀
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    // echo $_FILES["file"]["size"];
    $extension = end($temp);     // 获取文件后缀名
    if($_FILES["file"]["size"] > 512000){// 大于 500 kb
      $result = array("status" => 100, "message" => "图片不能大于500kb", "data" =>null);
    }else if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && in_array($extension, $allowedExts)){
      if ($_FILES["file"]["error"] > 0){
        $result = array("status" => 100, "message" => "上传失败", "data" =>null);
      }else{
            //上传后的图片以时间戳重新命名
        move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . time().".png");
        // echo(time().".png");
        $result = array("status" => 200, "message" => "上传成功", "data" => time().".png");
      }
    }else{
      $result = array("status" => 100, "message" => "图片格式不支持", "data" =>null);
    }
}
echo(json_encode($result)); 
?>
<?php
/**
 * 图片上传接口
 * @author 捕风阁 www.osuu.net
 * @time 2020.5.20
 */
$key=$_POST['key'];
$upkey=1234;//实际开发中应从数据库获取

if($key != $upkey){
    //这里是一个简略的key验证，防止接口被人抓取乱用
	$result = array("status" => 100, "message" => "上传失败,上传key错误", "data" =>null);
}else{
    // 允许上传的图片后缀
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    // echo $_FILES["file"]["size"];
    $extension = end($temp);     // 获取文件后缀名
    if($_FILES["file"]["size"] > 512000){// 大于 500 kb
	    $result = array("status" => 100, "message" => "图片不能大于500kb", "data" =>null);
    }else if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && in_array($extension, $allowedExts)){
	    if ($_FILES["file"]["error"] > 0){
		    $result = array("status" => 100, "message" => "上传失败", "data" =>null);
	    }else{
            //上传后的图片以时间戳重新命名
		    move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . time().".png");
		    // echo(time().".png");
		    $result = array("status" => 200, "message" => "上传成功", "data" => time().".png");
	    }
    }else{
	    $result = array("status" => 100, "message" => "图片格式不支持", "data" =>null);
    }
}
echo(json_encode($result)); 
?>

 

 

前端写法

官方文档：element

    <el-upload
    class="upload-demo"
    :action="action"
    :data="data"
    :on-error="imgError"
    :on-success="imgSuccess"
    :before-remove="beforeRemove"
    multiple
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileList"
    >   
    export default {
        data() {
          return {
            data: { key: "" },//key实际开发中请从后端获取
            fileList: [],
            action: "图片上传接口地址",
          };
        },
       
        methods: {
          //上传失败
          imgError(err, file, fileList) {
            this.$message.error(err);
          },
          imgSuccess(response, file, fileList) {
            if (response.status == 200) {
              this.$message({
                message: response.message,
                type: "success"
              });
              //response.data为返回的图片文件名，可将其写入数据库
              //this.imgurl = response.data;
            } else {
              this.$message.error(response.message);
              this.fileList = [];
            }
          },
      
          handleExceed(files, fileList) {
            this.$message.error("上传数量超过限制");
          },
          beforeRemove(file, fileList) {
            return this.$message({
              message: "删除成功",
              type: "success"
            });
          },
        }
      };
    <el-upload
    class="upload-demo"
    :action="action"
    :data="data"
    :on-error="imgError"
    :on-success="imgSuccess"
    :before-remove="beforeRemove"
    multiple
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileList"
    >   
    export default {
        data() {
          return {
            data: { key: "" },//key实际开发中请从后端获取
            fileList: [],
            action: "图片上传接口地址",
          };
        },
       
        methods: {
          //上传失败
          imgError(err, file, fileList) {
            this.$message.error(err);
          },
          imgSuccess(response, file, fileList) {
            if (response.status == 200) {
              this.$message({
                message: response.message,
                type: "success"
              });
              //response.data为返回的图片文件名，可将其写入数据库
              //this.imgurl = response.data;
            } else {
              this.$message.error(response.message);
              this.fileList = [];
            }
          },
      
          handleExceed(files, fileList) {
            this.$message.error("上传数量超过限制");
          },
          beforeRemove(file, fileList) {
            return this.$message({
              message: "删除成功",
              type: "success"
            });
          },
        }
      };
 
    <el-upload
    class="upload-demo"
    :action="action"
    :data="data"
    :on-error="imgError"
    :on-success="imgSuccess"
    :before-remove="beforeRemove"
    multiple
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileList"
    >   
    export default {
        data() {
          return {
            data: { key: "" },//key实际开发中请从后端获取
            fileList: [],
            action: "图片上传接口地址",
          };
        },
       
        methods: {
          //上传失败
          imgError(err, file, fileList) {
            this.$message.error(err);
          },
          imgSuccess(response, file, fileList) {
            if (response.status == 200) {
              this.$message({
                message: response.message,
                type: "success"
              });
              //response.data为返回的图片文件名，可将其写入数据库
              //this.imgurl = response.data;
            } else {
              this.$message.error(response.message);
              this.fileList = [];
            }
          },
      
          handleExceed(files, fileList) {
            this.$message.error("上传数量超过限制");
          },
          beforeRemove(file, fileList) {
            return this.$message({
              message: "删除成功",
              type: "success"
            });
          },
        }
      };

 

 

 

 

© 版权声明
站内部分资源由网友投稿或收集于网络，若侵犯了您的合法权益，请联系我们删除
THE END
Vue
# vue# PHP# 接口
喜欢就支持一下吧
点赞11 分享
Your dream is like a flower. if you water it patiently, the flower will come out beautifully.
即使是最简单的梦想，用心浇灌，也能开出绚烂的花
osuu的头像 - 捕风阁
相关推荐
抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

热门文章
免流流控破解脚本 FAS 青云 快云 VPNS 博雅dalo最新集合 - 捕风阁

1免流流控破解脚本 FAS 青云 快云 VPNS 博雅dalo最新集合

osuu的头像 - 捕风阁6年前
5.2W+
MT管理器v2.8.0vip破解版 - 捕风阁

2MT管理器v2.8.0vip破解版

osuu的头像 - 捕风阁6年前
3.5W+
网站爱心飘落特效js - 捕风阁

3网站爱心飘落特效js

osuu的头像 - 捕风阁6年前
2.1W+
QQ官方相关API接口，直接调用QQ信息 - 捕风阁

4QQ官方相关API接口，直接调用QQ信息

osuu的头像 - 捕风阁6年前
1.5W+
LightPicture - 精致图床系统 - 捕风阁

5LightPicture – 精致图床系统

osuu的头像 - 捕风阁3年前
7532
悟饭游戏厅破解金手指功能 - 捕风阁

6悟饭游戏厅破解金手指功能

osuu的头像 - 捕风阁5年前
6493
标签
脚本网站组件素材电脑软件游戏校园网旧城以西支付宝支付插件接口手机软件小程序字符串地图相关原创插件其他教程公告vueuniapp
热门文章
免流流控破解脚本 FAS 青云 快云 VPNS 博雅dalo最新集合 - 捕风阁

1免流流控破解脚本 FAS 青云 快云 VPNS 博雅dalo最新集合

osuu的头像 - 捕风阁6年前
5.2W+
MT管理器v2.8.0vip破解版 - 捕风阁

2MT管理器v2.8.0vip破解版

osuu的头像 - 捕风阁6年前
3.5W+
网站爱心飘落特效js - 捕风阁

3网站爱心飘落特效js

osuu的头像 - 捕风阁6年前
2.1W+
QQ官方相关API接口，直接调用QQ信息 - 捕风阁

4QQ官方相关API接口，直接调用QQ信息

osuu的头像 - 捕风阁6年前
1.5W+
LightPicture - 精致图床系统 - 捕风阁

5LightPicture – 精致图床系统

osuu的头像 - 捕风阁3年前
7532
悟饭游戏厅破解金手指功能 - 捕风阁

6悟饭游戏厅破解金手指功能

osuu的头像 - 捕风阁5年前
6493