摘要：找到頭像下面的添加一個的樣式類將內容改變成上傳成功并且顯示上傳成功文件上傳失敗，同樣是添加找到頭像下面的添加一個的樣式類將內容改變成上傳失敗并且顯示上傳失敗完成上傳完了，成功或者失敗，先刪除進度條。

是這個功能的最后一步了,
新增插件:
layer.js 彈窗層組件
jquery.form 異步表單提交插件

新增CSS:
layer擴展文件 修改layer彈窗的皮膚,默認的不喜歡!
基本代碼和之前第二節的差不多,修改了upload.js里面的一點點東西

先看看演示吧!

簡單的數據表:

-- 圖片表
DROP TABLE IF EXISTS images;
CREATE TABLE IF NOT EXISTS images(
  id INT(11) UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT "id",
  img_url VARCHAR(255) NOT NULL DEFAULT "" COMMENT "圖片名稱",
  create_time INT NOT NULL DEFAULT 0 COMMENT "創建時間",
  update_time INT NOT NULL DEFAULT 0 COMMENT "更新時間"
)ENGINE innodb CHARSET utf8 COMMENT "圖片表";
-- 用戶表
DROP TABLE if EXISTS user;
CREATE TABLE IF NOT EXISTS user(
  id INT(11) UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT "id",
  img_id int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT "圖片ID",
  create_time INT NOT NULL DEFAULT 0 COMMENT "創建時間",
  update_time INT NOT NULL DEFAULT 0 COMMENT "更新時間"
)ENGINE innodb CHARSET utf8 COMMENT "用戶表";

之后再aliyunOss配置文件中增加一個配置,就是訪問的域名;

//阿里云OSS配置
return [
    "KeyId"      => "***",  //您的Access Key ID
    "KeySecret"  => "***",  //您的Access Key Secret
    "Endpoint"   => "****",  //阿里云oss 外網地址endpoint
    "Bucket"     => "****",  //Bucket名稱
    "OssDomain" => "http://thinkpjax.cn/",  // 這個配置是新增的
];

創建基礎模型類 (application/index/model/base.php)

hasOne("Images","id","img_id");
    }
}

創建用戶模型(application/index/model/User.php) 繼承基礎模型類
創建圖片模型(application/index/model/Images.php)

修改upload.js
$ImgId = $face.find($("input[name="imgId"]"));
if (!$ImgId.length) {
$ImgId = $face.append("");
}
$face.find($("input[name="imgId"]")).val(response.data.imgId);
完整代碼:
/**
 * User: 李昊天
 * Date: 2018/5/18
 * Time: 1:15
 * Email: haotian0607@gmail.com
 */
$(function () {
    var $face = $("#face"), thumbnailWidth = 100, thumbnailHeight = 100;
    //創建uploader實例
    WebUploader.create({
        server: uploaderUrl, //服務器異步接受地址!
        pick: {
            id: "#changeFile", //指定選擇文件的按鈕容器
            multiple: false, //禁止多選
        },
        resize: false, //不壓縮image
        auto: true, //選擇之后自動上傳
        swf: "../flash/Uploader.swf", //防止低版本瀏覽器 用到了flash
        // 只允許選擇圖片文件。
        accept: {
            title: "Images",
            extensions: "gif,jpg,jpeg,bmp,png",
            mimeTypes: "image/*"
        }
    }).on("fileQueued", function (file) {
        // 當有文件添加進來的時候
        var $img = $face.find("img"); //獲取到頭像的DOM
        // 創建縮略圖
        this.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith("不能預覽");
                return;
            }
            $img.attr("src", src);
        }, thumbnailWidth, thumbnailHeight);
    }).on("uploadProgress", function (file, percentage) {
        // 文件上傳過程中創建進度條實時顯示。
        $percent = $face.find(".progress .progress-bar");
        $ImgId = $face.find($("input[name="imgId"]"));
        if (!$ImgId.length) {
            $ImgId = $face.append("");
        }
        // 避免重復創建
        if (!$percent.length) {
            //構建進度條DOM
            $face.append("
"); //這個是提示框
            $percent = $("
").appendTo($face).find("progress-bar");
        }
        $percent.css({"width": 50 + "%"}); //讓進度條動起來
    }).on("uploadSuccess", function (file, response) {
        // 文件上傳成功，給dialog添加class, 用樣式標記上傳成功。
        //找到頭像DIV下面的dialog  添加一個success的樣式類將內容改變成上傳成功并且顯示!
        $face.find(".dialog").addClass("success").text("上傳成功").show();
        $face.find($("input[name="imgId"]")).val(response.data.imgId);
    }).on("uploadError", function (file) {
        // 文件上傳失敗，同樣是添加Class
        //找到頭像DIV下面的dialog  添加一個error的樣式類將內容改變成上傳失敗并且顯示!
        $face.find(".dialog").addClass("error").text("上傳失敗").show();
    }).on("uploadComplete", function (file) {
        // 完成上傳完了，成功或者失敗，先刪除進度條。
        $face.find(".progress").remove();
    });
});

修改up.html里面的代碼:
主要是加入表單,加入提交按鈕,加入form.js和layer.js
主要部分代碼:

        

            
        
        
選擇文件
        

            提交修改
        
    
加入操作的js

后端代碼也有更改:
public function uploadFile()
    {
//        sleep(3);
        $file = request()->file("file");  //獲取到上傳的文件
        $resResult = Image::open($file);
        try {
            $config = Config::pull("aliyun_oss"); //獲取Oss的配置
            //實例化對象 將配置傳入
            $ossClient = new OssClient($config["KeyId"], $config["KeySecret"], $config["Endpoint"]);
            //這里是有sha1加密 生成文件名 之后連接上后綴
            $fileName = sha1(date("YmdHis", time()) . uniqid()) . "." . $resResult->type();
            //執行阿里云上傳
            $result = $ossClient->uploadFile($config["Bucket"], $fileName, $file->getInfo()["tmp_name"]);
            if ($result && $result["info"]["http_code"] == 200) {
                try {
                    $Images = new Images(); //實例化圖片模型
                    $Images->allowField("img_url")->save([
                        "img_url" => $fileName   //寫入上傳的文件名
                    ]);
                    return ajaxReturn(parent::SUCCESS, "success", [
                        "imgId" => $Images->id,
                    ]);
                } catch (Exception $e) {
                    return ajaxReturn(parent::FAIL, "error");
                }
            } else {
                return ajaxReturn(parent::FAIL, "error");
            }
        } catch (OssException $e) {
            return $e->getMessage();
        }
    }
最好是在修改的時候判斷表單傳遞的imgId與數據庫里面的ID,如果一致就不允許修改!
修改邏輯代碼:
 public function modify()
    {
        if (request()->isPost()) {
            $userData = (new UserModel())->find(parent::$uid);
            if (null === $userData) {
                return ajaxReturn(parent::FAIL, "獲取用戶信息失敗,請重新登錄!");
            }
            $imgId = input("post.imgId", "");
            $result = $userData->allowField("img_id")->save(["img_id" => $imgId]);
            if ($result) {
                return ajaxReturn(parent::SUCCESS, "修改成功!");
            } else {
                return ajaxReturn(parent::FAIL, "操作失敗!");
            }
        }
    }
up控制器:
public function up()
    {
       /**
         * 使用動態關聯預載入
         */
        $userData = (new UserModel())->with("img")->find(parent::$uid);
        return $this->fetch("up", [
            "data" => $userData,
        ]);
    }
基礎模型類: