EBook upload

Create upload page component

In the front-end Directory , newly build src\views\book\components\Detail.vue

<template>
  <div>isEdit:{
   { isEdit }}</div>
</template>

<script> export default {
       name: 'Detail', props: {
       isEdit: Boolean } } </script>

<style lang="scss" scoped></style>

E-book uploading process is divided into adding e-books （book/create） And edit eBooks （/book/edit）, introduce Detail Components

• newly added src\views\book\create.vue
• modify src\views\book\edit.vue

<template>
  <detail :is-edit="false"></detail>
</template>

<script> import Detail from './components/Detail.vue' export default {
       name: 'Create', components: {
       Detail } } </script>

We want to edit books , Book list highlights , Because editing books is a jump from the book list , I also don't want the list of edited books displayed in the sidebar

• modify activeMenu: '/book/list'
• modify hidden: true

export const asyncRoutes = [
  {
    
    // ...
    children: [
      // ...
      {
    
        path: '/book/edit',
        component: () => import('@/views/book/edit'),
        name: 'bookEdit',
        hidden: true,
        meta: {
     title: ' Editing books ', icon: 'edit', roles: ['admin'], activeMenu: '/book/list' }
      }
      // ...
    ]
  },
]

Detail Components are more complex , First realize Detail The general layout of , Including a el-form and sticky The navigation bar

• sticky When there is a lot of content, it will produce a ceiling effect ,fixed-header（ Include navbar and tags-view） It is positioned as fixed And z-index by 9, The height is 84 px

  If you wish sticky Cover fixed-header You can give z-index by 10

  If you wish sticky stay fixed-header below , You can give sticky-top by 84 px

• sub-navbar This class The attribute of is src\styles\index.scss Defined in

For those that can be modified el-form-item Fu prop

<template>
  <el-form ref="postForm" :model="postForm" class="form-container" :rules="rules">
    <sticky :sticky-top="84" :z-index="10" :class-name="'sub-navbar ' + postForm.status">
      <el-button v-if="!isEdit" @click="showGuide"> Display help </el-button>
      <el-button v-loading="loading" type="success" style="margin-left: 10px" @click="submitForm" >
        {
   { isEdit ? ' Edit e-books ' : ' New e-books ' }}
      </el-button>
    </sticky>
    <div class="detail-container">
      <el-row>
        <warning />
        <el-col :span="24">
          <ebook-upload :file-list="fileList" :disabled="isEdit" @onSuccess="onUploadSucess" @onRemove="onUploadRemove" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="title">
            <md-input v-model="postForm.title" :maxlength="100" name="name" required>
               Title 
            </md-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="author" label=" author ：" :label-width="labelWidth">
            <el-input v-model="postForm.author" placeholder=" author " />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="publisher" label=" Press. ：" :label-width="labelWidth">
            <el-input v-model="postForm.publisher" placeholder=" Press. " />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="language" label=" Language ：" :label-width="labelWidth">
            <el-input v-model="postForm.language" placeholder=" Language " />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="rootFile" label=" Root file ：" :label-width="labelWidth">
            <el-input v-model="postForm.rootFile" placeholder=" Root file " disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="filePath" label=" File path ：" :label-width="labelWidth">
            <el-input v-model="postForm.filePath" placeholder=" File path " disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="unzipPath" label=" Decompression path ：" :label-width="labelWidth">
            <el-input v-model="postForm.unzipPath" placeholder=" Decompression path " disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="coverPath" label=" Cover path ：" :label-width="labelWidth">
            <el-input v-model="postForm.coverPath" placeholder=" Cover path " disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="originalName" label=" File name ：" :label-width="labelWidth">
            <el-input v-model="postForm.originalName" placeholder=" File name " disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label=" cover ：" label-width="labelWidth">
            <a v-if="postForm.cover" :href="postForm.cover" target="_blank">
              <img :src="postForm.cover" alt="" class="preview-img" />
            </a>
            <span v-else> nothing </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label=" Catalog ：" label-width="labelWidth">
            <div v-if="postForm.contents && postForm.contents.length > 0" class="contents-wrapper" >
              <el-tree />
            </div>
            <span v-else> nothing </span>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script> import Sticky from '@/components/Sticky' import EbookUpload from '@/components/EbookUpload' import MdInput from '@/components/MdInput' import Warning from './Warning.vue' export default {
       name: 'Detail', components: {
       Sticky, Warning, EbookUpload, MdInput }, props: {
       isEdit: Boolean }, data() {
       return {
       loading: false, postForm: {
       status: '', title: '', //  Title  author: '', //  author  publisher: '', //  Press.  language: '', //  Language  rootFile: '', //  Root file path  filePath: '', //  File path  unzipPath: '', //  The path where the extracted file is located  coverPath: '', //  Cover picture path  originalName: '', //  file name  cover: '', //  Cover picture URL contents: [] //  Catalog  }, labelWidth: '120px', fileList: [] } }, methods: {
       submitForm() {
       this.loading = true setTimeout(() => {
       this.loading = false }, 1000) }, showGuide() {
       console.log('showGuide...') }, onUploadSucess() {
       console.log('onUploadSucess') }, onUploadRemove() {
       console.log('onUploadRemove') } } } </script>

<style lang="scss" scoped> .detail-container {
       padding: 40px 50px 20px; .preview-img {
       width: 200px; height: 270px; } .contents-wrapper {
       padding: 5px 0; } } </style>

• newly build src\views\book\components\Warning.vue

<template>
  <aside>
     Uploading an e-book is a two-step process ： Upload ebooks and add new ebooks . First you need to upload epub E-book files , The server will epub File parsing , After successful parsing, the fields of the e-book will be filled in the form , After that, we just need to manually click the new e-book to save the e-book . see ：
    <a href="http://www.youbaobao.xyz/admin-docs/" target="_blank"> Course website </a>
     Get more development guidelines .
  </aside>
</template>

Upload component development EbookUpload

Upload Please refer to my article for some details of component uploading ：Vue Use in Upload Component upload Excel, You can also refer to Upload Upload Element

• newly build src\components\EbookUpload\index.vue

<template>
  <div class="upload-container">
    <el-upload :action="action" :headers="headers" :multiple="false" :limit="1" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :on-remove="onRemove" :file-list="fileList" :on-exceed="onExceed" :disabled="disabled" drag show-file-list accept="application/epub+zip" class="image-upload" >
      <i class="el-icon-upload" />
      <div v-if="fileList.length === 0" class="el-upload__text">
         Please drag the ebook into or 
        <em> Click upload </em>
      </div>
      <div v-else class="el-upload__text"> The book has been uploaded </div>
    </el-upload>
  </div>
</template>

<script> import {
       getToken } from '@/utils/auth' export default {
       name: 'EbookUpload', props: {
       fileList: {
       type: Array, default() {
       return [] } }, disabled: {
       type: Boolean, default: false } }, data() {
       return {
       action: `${
        process.env.VUE_APP_BASE_API}/book/upload` } }, computed: {
       headers() {
       return {
       Authorization: `Bearer ${
        getToken()}` } } }, methods: {
       beforeUpload(file) {
       this.$emit('beforeUpload', file) }, onSuccess(res, file) {
       const {
       code, msg } = res if (code === 0) {
       this.$message({
       message: msg, type: 'success', showClose: true }) this.$emit('onSuccess', file) } else {
       this.$message({
       message: (msg && ` Upload failed , Reasons for failure ：${
        msg}`) || ' Upload failed ', type: 'error', showClose: true }) this.$emit('onError', file) } }, onError(err) {
       const errMsg = err.message && JSON.parse(err.message) this.$message({
       message: (errMsg.msg && ` Upload failed , Reasons for failure ：${
        errMsg.msg}`) || ' Upload failed ', type: 'error', showClose: true }) this.$emit('onError', err) }, onRemove() {
       this.$message({
       message: ' E-book deletion succeeded ', type: 'success', showClose: true }) this.$emit('onRemove') }, onExceed() {
       this.$message({
       message: ' Only one ebook can be uploaded at a time ', type: 'warning', showClose: true }) } } } </script>

Upload API Development multer

newly build utils\env.js

const env = 'dev'

module.exports = {
    
  env,
}

The upload path specifies Nginx route , The advantage of this is that once the e-book is copied to the specified directory , You can go through Nginx Generate Download Links ：

const {
     env } = require('./env')
const UPLOAD_PATH =
  env === 'dev' ? 'E:/upload/admin-upload-ebook' : '/root/upload/admin-upload-ebook'

module.exports = {
    
  // ...
  UPLOAD_PATH
}

install multer To achieve file upload

• multer Chinese document

npm i multer

modify router\index.js Add to route

const bookRouter = require('./book')

router.use('/user', bookRouter)

newly build router\book.js

• multer It will add a body object , as well as file or files Object to to express Of request In the object

  body Object contains the text field information of the form

  file or files The object contains the file information uploaded by the object form

• multer Accept one options object , The most basic of them is dest attribute , This will tell multer Where to save the uploaded file

• .single(filename) Accept a filename Named file , The information of this file is saved in req.file

const express = require('express')
const multer = require('multer')
const Result = require('../models/Result')
const {
     UPLOAD_PATH } = require('../utils/constant')

const router = express.Router()
const upload = multer({
     dest: `${
      UPLOAD_PATH}/book` })

router.post('/upload', upload.single('file'), (req, res, next) => {
    
  if (!req.file || req.file.length === 0) {
    
    new Result(' Failed to upload e-book ').fail(res)
  } else {
    
    new Result(' Uploading e-book succeeded ').success(res)
  }
})

module.exports = router