Create new branch

wj-vue/src/components/home/UpdateCard.vue

@@ -43,7 +43,7 @@
 
 <script>
   export default {
-    name: 'Card'
+    name: 'UpdateCard'
   }
 </script>
 

wj-vue/src/components/library/EditForm.vue

@@ -18,7 +18,8 @@
           <el-input v-model="form.press" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="封面" :label-width="formLabelWidth" prop="cover">
-          <el-input v-model="form.cover" autocomplete="off" placeholder="请输入 URL"></el-input>
+          <!--<el-input v-model="form.cover" autocomplete="off" placeholder="请输入 URL"></el-input>-->
+          <img-upload></img-upload>
         </el-form-item>
         <el-form-item label="简介" :label-width="formLabelWidth" prop="abs">
           <el-input type="textarea" v-model="form.abs" autocomplete="off"></el-input>
@@ -46,8 +47,10 @@
 </template>
 
 <script>
+  import ImgUpload from './ImgUpload'
   export default {
     name: 'EditForm',
+    components: {ImgUpload},
     data () {
       return {
         dialogFormVisible: false,

wj-vue/src/components/library/ImgUpload.vue

+<template>
+  <el-upload
+    class="img-upload"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    :on-preview="handlePreview"
+    :on-remove="handleRemove"
+    :before-remove="beforeRemove"
+    multiple
+    :limit="3"
+    :on-exceed="handleExceed"
+    :file-list="fileList">
+    <el-button size="small" type="primary">点击上传</el-button>
+    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+  </el-upload>
+</template>
+
+<script>
+  export default {
+    name: 'ImgUpload',
+    data () {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      }
+    },
+    methods: {
+      handleRemove (file, fileList) {
+        console.log(file, fileList)
+      },
+      handlePreview (file) {
+        console.log(file)
+      },
+      handleExceed (files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+      },
+      beforeRemove (file, fileList) {
+        return this.$confirm(`确定移除 ${file.name}？`)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .img-upload {
+    height: 200px;
+  }
+</style>

wj-vue/src/components/library/LibraryIndex.vue

@@ -6,6 +6,7 @@
     <el-main>
       <el-row>
         <books class="books-area" ref="booksArea"></books>
+        <img-upload></img-upload>
       </el-row>
     </el-main>
   </el-container>
@@ -16,10 +17,11 @@
   import Tag from './Tag'
   import Books from './Books'
   import About from '../common/About'
+  import ImgUpload from './ImgUpload'
 
   export default {
     name: 'AppLibrary',
-    components: {Books, Tag, SideMenu, About},
+    components: {Books, Tag, SideMenu, About, ImgUpload},
     methods: {
       listByCategory () {
         var _this = this