修改头像上传组件

src/frontend/views/home/video.php

@@ -5,8 +5,10 @@
  * Date: 2016/10/14
  * Time: 下午5:39
  */
+use frontend\assets\AppAsset;
+
 $this->title = "视频播放";
-\backend\assets\AppAsset::register($this);
+AppAsset::register($this);
 $js = <<<JS
  window._bd_share_config = {
         "common": {

src/frontend/views/user-center/info.php

@@ -12,17 +12,10 @@ $url = Yii::$app->qiniu->storages['public']['url'];
 
 
 <div id="edit-container" class="add-box" style="display: none">
-    <div class="add-box-main">
+    <div id="user-center-info-container" class="add-box-main">
         <div class="tit">基本信息</div>
 
-        <div class="upload-avatar" id="avatar-uploader" token="<?= $publicToken ?>">
-            <div id="upload-avatar-value">
-                <i class=" icon-image"></i>
-                <p>上传头像</p>
-            </div>
-            <span id="upload-process" style="display:none;" class="loading-tip">上传中</span>
-
-        </div>
+        <avatar-upload uptoken="<?=$publicToken?>"></avatar-upload>
 
         <input id="avatar" type="hidden"
                value="<?= \yii\bootstrap\Html::encode(Yii::$app->user->identity->avatar) ?>">

src/frontend/web/js/user-center/info.js

 /**
  * Created by xiabin on 2016/9/29.
  */
-require.ensure('../libs/plupload/plupload.full.min.js', function () {
-    require('script!../libs/plupload/plupload.full.min.js');
-    var token = $('#avatar-uploader').attr('token');
-    var uploader = new plupload.Uploader({
-        runtimes: 'html5,flash,html4',
-        browse_button: 'avatar-uploader',
-        url: "http://upload.qiniu.com/",
-        multipart_params: {
-            token: token
-        },
-        max_file_size: '5MB',
-        flash_swf_url: __CDN_URL__ + 'assets/single-lib/plupload/Moxie.swf',
-        max_retries: 0,
-        dragdrop: false,
-        multi_selection: false,
-        auto_start: true,
-        init: {
-            'FilesAdded': function (up, files) {
-                // plupload.each(files, function (file) {
-                //     ready.find(".upload-info-size").text(filesize(file.origSize));
-                //     ready.find("h3").text(file.name);
-                // });
-                //
-                // container.find(".upload-video-btn").hide();
-                // ready.show();
-                //
-                up.start();
-                up.disableBrowse();
-                //
-                // startTime = (new Date()).getTime();
-            },
-            'BeforeUpload': function (up, file) {
-                // 每个文件上传前，处理相关的事情
-            },
-            'UploadProgress': function (up, file) {
-                $('#upload-process').show();
-
-            },
-            'FileUploaded': function (up, file, info) {
-                // 每个文件上传成功后，处理相关的事情
-
-                $('#upload-process').hide();
-                var res = JSON.parse(info.response);
-                var url = __QINIU_URL__ + res.key;
-                var html = '<img src="' + url + '">';
-                $('#upload-avatar-value').html(html);
-                $('#avatar').val(res.key);
-
-            },
-            'Error': function (up, err, errTip) {
-                //上传出错时，处理相关的事情
-            },
-            'UploadComplete': function () {
-                //队列文件处理完毕后，处理相关的事情
-            }
-        }
-    });
-    uploader.init()
+var Vue = require('vue');
+var avatarUploader = require('../components/uploader/avatar-upload.vue');
+new Vue({
+    el:'#user-center-info-container',
+    components: {
+        "avatar-upload": avatarUploader
+    },
+    ready:function () {
+        this.$on("avatar-uploaded", function(name, data) {
+            $('#avatar').val(data.key);
+        });
+    }
 });
 
 $("#cancel").click(function () {