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

说明

我们平时自己开发项目的时候会用到图片上传，这里就把之前写的一个例子整理一下，使用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)); 
?>

前端写法

官方文档：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"
            });
          },
        }
      };