公共组件

src/components/Audio/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-button :type="type" :icon="icon" @click="getPlayAudio" />
+</template>
+
+<script>
+const audio = new Audio()
+export default {
+  props: {
+    src: String
+  },
+  data() {
+    return {
+      type: 'text',
+      icon: 'el-icon-video-play'
+    }
+  },
+  methods: {
+    getPlayAudio() {
+      if (this.type === 'text') {
+        audio.src = this.src
+        if (!this.src) {
+          this.$message.error('没有找到可播放的资源')
+          return false
+        }
+        this.type = 'delete'
+        this.icon = 'el-icon-video-pause'
+        audio.play()
+      } else {
+        this.type = 'text'
+        this.icon = 'el-icon-video-play'
+        audio.pause()
+      }
+    }
+  }
+}
+</script>

src/components/Upload/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="upload">
-    <el-upload v-if="hidden" :action="newAction" :headers="headers" :multiple="multiple" :data="data"
-      :show-file-list="showFileList" :accept="accept" :list-type="listType" :on-progress="onProgress"
+    <el-upload v-if="hidden" :action="action" :headers="headers" :multiple="multiple" :data="data"
+      :accept="accept" :show-file-list="showFileList" :list-type="listType" :on-progress="onProgress"
       :on-error="onError" :on-success="onSuccess" :before-upload="beforeUpload" :disabled="disabled">
-      <el-button v-if="listType === 'text'" :type="btnType">{{ newTitle }}</el-button>
+      <el-button v-if="listType !== 'picture-card'" :type="btnType">{{ newTitle }}</el-button>
       <i v-else class="el-icon-plus" />
     </el-upload>
     <el-progress v-if="isShow()" type="circle" :percentage="percent" :status="isStatus" />
@@ -15,11 +15,10 @@
 </template>
 
 <script>
+const baseUrl = process.env.VUE_APP_BASE_API
 import { getToken } from "@/utils/auth";
 export default {
   props: {
-    // 接口地址
-    action: String,
     // 图片
     url: String,
     // 类型
@@ -27,16 +26,16 @@ export default {
       type: String,
       default: 'text'
     },
+    // 是否显示已上传文件列表
+    showFileList: {
+      type: Boolean,
+      default: false
+    },
     // 是否支持多选文件
     multiple: {
       type: Boolean,
       default: false
     },
-    // 限制上传文件类型
-    accept: {
-      type: String,
-      default: ''
-    },
     // 是否禁用
     disabled: {
       type: Boolean,
@@ -51,12 +50,14 @@ export default {
     measure: {
       type: String,
       default: ''
-    }
+    },
+    // 文件大小
+    size: Number
   },
   data() {
     return {
       // 上传地址
-      newAction: this.action !== undefined ? process.env.VUE_APP_BASE_API + this.action : this.listType === 'text' ? `${process.env.VUE_APP_BASE_API}/system/file/file/upload` : `${process.env.VUE_APP_BASE_API}/system/file/picture/upload`,
+      action: `${baseUrl}/system/file/picture/upload`,
       // 请求头
       headers: {
         Authorization: "Bearer " + getToken(),
@@ -65,9 +66,6 @@ export default {
       data: {},
       // 文件字段名
       name: '',
-      // 是否显示已上传文件列表
-      showFileList: false,
-
       // 是否显示上传按钮
       hidden: true,
       // 按钮文字
@@ -84,16 +82,14 @@ export default {
       form: {},
       // 上传图片的尺寸
       width: Number(this.measure.split('*')[0]),
-      height: Number(this.measure.split('*')[1])
+      height: Number(this.measure.split('*')[1]),
+      // 上传的文件格式
+      accept: ''
     }
   },
-  mounted() {
-    this.newUrl = this.url ? this.url : ''
-    this.hidden = this.url ? false : true
-  },
   watch: {
     measure(val) {
-      this.width = Number(val.split('*')[0]),
+      this.width = Number(val.split('*')[0])
       this.height = Number(val.split('*')[1])
     },
     url(val) {
@@ -101,29 +97,45 @@ export default {
       this.hidden = val ? false : true
     }
   },
+  mounted() {
+    if (this.listType === 'picture-card') {
+      this.action = `${baseUrl}/system/file/picture/upload`
+      this.accept = '.jpg, .jpeg, .png, .bmp, .icon, .gif'
+    } else if (this.listType === 'text') {
+      this.action = `${baseUrl}/system/file/file/upload`
+    } else if (this.listType === 'audio') {
+      this.action = `${baseUrl}/system/file/mp3/upload`
+      this.accept = '.mp3, .wav, .aiff, .midi, .wma'
+    }
+
+    this.newUrl = this.url ? this.url : ''
+    this.hidden = this.url ? false : true
+  },
   methods: {
     // 上传之前
     async beforeUpload(file) {
-      if (this.measure) {
+      if (this.measure || this.size) {
         await this.measureChecked(file).then((res) => {
-          this.data.multipartFile = res ? file : ''
-          this.name = res ? file.name : ''
-          if (this.listType === 'text') {
-            this.form.size = res ? file.size : ''
-          } else {
-            this.hidden = res ? false : true
+          if (res) {
+            this.isUpload(file)
           }
         })
       } else {
-        this.data.multipartFile = file
-        this.name = file.name
-        if (this.listType === 'text') {
-          this.form.size = file.size
-        } else {
-          this.hidden = false
-        }
+        this.isUpload(file)
       }
     },
+
+    // 上传
+    isUpload(file) {
+      this.data.multipartFile = file
+      this.name = file.name
+      if (this.listType !== 'picture-card') {
+        this.form.size = file.size
+      } else {
+        this.hidden = false
+      }
+    },
+
     // 上传过程中
     onProgress(e) {
       this.percent = parseInt(e.percent)
@@ -153,7 +165,7 @@ export default {
 
     // 删除图片
     getDelete() {
-      if (this.listType !== 'text') {
+      if (this.listType == 'picture-card') {
         this.hidden = true
         this.percent = 0
         this.newUrl = ''
@@ -163,30 +175,41 @@ export default {
 
     // 是否显示图片进度条
     isShow() {
-      if (this.listType !== 'text') {
+      if (this.listType == 'picture-card') {
         return !this.hidden && this.newUrl === '' ? true : false
       } else {
         return false
       }
     },
 
-    // 判断图片尺寸
+    // 判断图片尺寸 或 文件大小
     measureChecked(file) {
       return new Promise((resolve, reject) => {
-        let reader = new FileReader()
-        reader.readAsDataURL(file)
-        reader.onload = () => {
-          let img = new Image()
-          img.src = reader.result
-          img.onload = () => {
-            if (img.width !== this.width || img.height !== this.height) {
-              this.$message.error(`请上传${this.measure}尺寸的图片`)
-              resolve(false)
-            } else {
-              resolve(true)
+        if (this.measure) {
+          let reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = () => {
+            let img = new Image()
+            img.src = reader.result
+            img.onload = () => {
+              if (img.width !== this.width || img.height !== this.height) {
+                this.$message.error(`请上传${this.measure}尺寸的图片`)
+                reject
+              } else {
+                resolve(true)
+              }
             }
           }
         }
+
+        if (this.size) {
+          if ((file.size / 1024 / 1024) > this.size) {
+            this.$message.error(`上传文件过大`)
+            reject
+          } else {
+            resolve(true)
+          }
+        }
       })
     }
   }