03/04 016 017

src/main/vue/src/components/SingleVocie.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-upload class="upload-demo" :action="url" :show-file-list="false" :on-success="onSuccess" :before-upload="beforeUpload">
+    <div></div>
+    <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
+    <div slot="tip" class="el-upload__tip">{{tipsMsg}}</div>
+  </el-upload>
+</template>
+<script>
+import { imageUrlPrefix } from '../config'
+
+const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
+export default {
+  created() {
+    this.updateImageUrl(this.value);
+  },
+  props: {
+    value: String,
+    usePrefix: {
+      type: Boolean,
+      default: true
+    },
+    prefix: {
+      type: String,
+      default: imageUrlPrefix
+    },
+    url: {
+      type: String,
+      default: baseUrl + '/assets/uploadFile'
+    },
+    fileType: {
+      type: String,
+      default: 'voice'
+    }
+  },
+  data() {
+    return {
+      imageUrl: '',
+      loading: false
+    };
+  },
+  computed: {
+    tipsMsg() {
+      var msg = '';
+      switch (this.fileType) {
+        case 'voice':
+          msg = '只能上传mp3文件';
+          break;
+        case 'movice':
+          msg = '只能上传mp4文件';
+          break;
+      }
+      return msg;
+    },
+    needFile() {
+      var msg = '';
+      switch (this.fileType) {
+        case 'voice':
+          msg = 'mp3';
+          break;
+        case 'movice':
+          msg = 'mp4';
+          break;
+      }
+      return msg;
+    },
+    warningMsg() {
+      var msg = '';
+      switch (this.fileType) {
+        case 'voice':
+          msg = '音频文件格式错误';
+          break;
+        case 'movice':
+          msg = '视频文件格式错误';
+          break;
+      }
+      return msg;
+    }
+  },
+  methods: {
+    onSuccess(res, file) {
+      this.loading = false;
+      this.imageUrl = URL.createObjectURL(file.raw);
+      var newVal = '';
+      if (res.data instanceof Array) {
+        newVal = res.data[0];
+      } else {
+        newVal = res.data;
+      }
+      this.$emit('input', newVal);
+    },
+    onError(err, file, fileList) {
+      this.loading = false;
+    },
+    beforeUpload(file) {
+      console.log(file)
+      if (file.name.indexOf(this.needFile) == -1) {
+        this.$message({
+          type: 'warning',
+          message: this.warningMsg
+        });
+        return false;
+      }
+      this.loading = true;
+      return true;
+    },
+    updateImageUrl(url) {
+      if (this.usePrefix && url && url.indexOf(this.prefix) === -1 && url.indexOf('http') === -1) {
+        this.imageUrl = this.prefix + url;
+      } else {
+        this.imageUrl = url;
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      this.updateImageUrl(val);
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  background-color: #fbfdff;
+  &:hover {
+    border-color: #409eff;
+  }
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  &:hover {
+    border-color: #409eff;
+  }
+}
+
+.wrapper {
+  position: relative;
+}
+
+.single-upload .el-upload {
+  position: relative;
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+  color: #333;
+  font-size: 24px;
+}
+</style>