视频后台管理，提成计算优化

stdiet-ui/src/components/FileUpload/UploadFile.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-upload
+  class="avatar-uploader"
+  :headers="upload.headers"
+  :action="upload.url"
+  :show-file-list="false"
+  :on-success="handleFileSuccess"
+  :accept="'.png,.jpg'"
+  :before-upload="beforeAvatarUpload">
+  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+  <div class="el-upload__tip" slot="tip">
+      1、只能上传png、jpg文件，且每个文件不超过{{
+        upload.fileSize / (1024 * 1024)
+      }}M
+    </div>
+</el-upload>
+</template>
+<script>
+import { getToken } from "@/utils/auth";
+export default {
+  name: "DragUpload",
+  components: {},
+  data() {
+    return {
+      upload: {
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/custom/fileUpload/" + this.prefix,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 其他需要携带的数据
+        data: {},
+        //每个文件大小(单位：byte)
+        fileSize: 1024 * 1024 * 10,
+      },
+      //上传之后的路径
+      imageUrl: null,
+      fileUrl: null
+    };
+  },
+  methods: {
+    resetUpload(){
+        this.imageUrl = null;
+        this.fileUrl = null
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      if (response != null && response.code === 200) {
+        this.fileUrl = response.fileUrl;
+        this.imageUrl = response.previewUrl;
+        //this.imageUrl = URL.createObjectURL(file.raw);
+        //文件全部上传成功，则调用回调方法
+        this.$emit("callbackMethod", this.fileUrl);
+      } else {
+        this.$message.error("文件上传失败");
+      }
+    },
+    // 文件上传失败处理
+    handleFileFail(err, file, fileList) {
+      this.$message.error("文件上传失败");
+    },
+    beforeAvatarUpload(file) {
+        if(file.type != 'image/jpeg' && file.type != 'image/png') {
+          this.$message.error('文件格式错误');
+          return false;
+        }
+        if (file.size > this.upload.fileSize) {
+          this.$message.error('文件大小超过最大限制');
+          return false;
+        }
+        return true;
+    }
+  },
+  props: {
+    prefix: {
+      type: String,
+      default: "videoCover",
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.avatar-uploader .el-upload {
+    border: 1px dashed #d7e236;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 300px;
+    height: 200px;
+    display: block;
+  }
+</style>
+