upload

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <transition name="bounce">
+      <router-view></router-view>
+    </transition>
   </div>
 </template>
 

src/components/CreateAlbum.vue

@@ -3,8 +3,8 @@
         <el-dialog
                 title="创建相册"
                 :visible.sync="visible"
-                @close="$emit('update:show', false)"
-                :showCreate="show">
+                @close="$emit('update:Create', false)"
+                :show="Create">
             <el-input type="text" v-model="albumName"></el-input>
             <div>
                 <el-button type="success" @click="create">确定</el-button>
@@ -20,18 +20,18 @@
         data(){
             return {
                 albumName : '',
-                visible: this.show
+                visible: this.Create
             }
         },
         props: {
-            show: {
+            Create: {
                 type: Boolean,
                 default: false
             }
         },
         watch :{
             show () {
-                this.visible = this.show;
+                this.visible = this.Create;
             }
         },
         methods : {

src/components/Index.vue

@@ -32,10 +32,11 @@
                     </ul>
                 </div>
                 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
-                    <create-album :show.sync="show"></create-album>
+                    <create-album :show.sync="Create"></create-album>
                     <el-button class="my-create"  type="success" @click="showCreate">创建相册</el-button>
 
-                    <upload-image :showCreate.sync="show"></upload-image>
+
+                    <upload-image :show.sync="show"></upload-image>
                     <el-button class="my-upload" type="button" @click="uploadImage">上传照片到此相册</el-button>
                     <h1 class="page-header"></h1>
 
@@ -63,6 +64,7 @@ export default {
     name : 'index',
     data () {
         return {
+            Create : false,
             show : false,
             title : this.$store.state.title
         }
@@ -95,10 +97,11 @@ export default {
             this.show = true;
         },
         showCreate(){
-          this.show = true;
+          this.Create = true;
         },
         // 获取选中的相册的图片列表
         listImages (name){
+            this.$store.commit('setCurrentAlbum',name);
             axios.post('/auth/download?page=1&size=10',qs.stringify({username :localStorage.userName,album:name})).then(res => {
                 if (res.data.status == 0){
                     if (res.data.data == null){

src/components/Login.vue

@@ -57,7 +57,7 @@ export default {
                           message : '登录成功',
                           type : 'success'
                       });
-                      this.$router.push({path:'index'})
+                      this.$router.push({path:'/'})
                   }else {
                       this.$notify({
                           title : '提示信息',

src/components/UploadImage.vue

@@ -1,16 +1,17 @@
 <template>
     <div class="dialog-container">
         <el-dialog
-                title="上传图片"
-                :visible.sync="visible"
-                @close="$emit('update:show', false)"
-                :show="show">
+            title="上传照片"
+            :visible.sync="visible"
+            @close="$emit('update:show', false)"
+            :show="show">
             <el-upload
                     class="ensure ensureButt"
                     action="http://59.110.160.110:9990/auth/upload"
                     :on-preview="handlePreview"
                     name="images"
-                    data=""
+                    ref="upload"
+                    data: postData
                     :on-remove="handleRemove"
                     :file-list="fileList"
                     :onError="uploadError"
@@ -43,15 +44,23 @@
                 this.visible = this.show;
             }
         },
+        computed : {
+            postData (){
+                return {
+                    username : localStorage.userName,
+                    album : this.$store.getters.getCurrentAlbum
+                }
+            }
+        },
         methods : {
             handleRemove(file, fileList) {
                 console.log(file, fileList);
             },
             handlePreview(file,fileList) {
                 console.log(file,fileList);
             },
-            submitUpload (file){
-                console.log(file)
+            submitUpload() {
+                this.$refs.upload.submit();
             },
             uploadError (){
                 this.$notify({

src/router/index.js

@@ -14,7 +14,7 @@ export default new Router({
       component: Login
     },
     {
-      path: '/index',
+      path: '/',
       name: 'index',
       meta : {
         requireAuth: true,

src/vuex/store.js

@@ -15,9 +15,13 @@ const store = new Vuex.Store({
             userName : '',
             albumNames : [],
         },
+        currentAlbum : '',
         images : [],
     },
     getters :{
+        getCurrentAlbum : state => {
+            return state.currentAlbum;
+        },
         getToken(state){
             return state.userInfo.token;
         },
@@ -32,7 +36,7 @@ const store = new Vuex.Store({
             return images;
         },
         isLogin() {
-            let  token_expire = Date.parse(new Date(localStorage.token_expire || store.state.userInfo.expire));
+            let  token_expire = Date.parse(new Date(store.state.userInfo.expire  || localStorage.token_expire));
             let now_time = Date.parse(new Date());
             console.log('now_time : ',now_time,'expire : ',token_expire);
             if (localStorage.token != '' && token_expire > now_time){
@@ -54,8 +58,11 @@ const store = new Vuex.Store({
         },
         // 保存相册的图片信息
         putImages (state , payload){
-            state.images = payload
+            state.images = payload;
         },
+        setCurrentAlbum : (state , payload) => {
+            state.currentAlbum = payload;
+        }
     }
 
 });