封装阿里云oss

src/components/upload/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-upload :disabled="uploading"
+             :before-upload="beforeUpload"
+             :on-remove="onRemove"
+             :on-error="uploadError"
+             :limit="limit"
+             action=""
+             :on-exceed="handleExceed"
+             :show-file-list="showFiles"
+             :file-list="fileList"
+             :http-request="handleRequest"
+             name="file">
+    <slot name="trigger">
+      <el-button size="small"
+                 :loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button>
+    </slot>
+    <div slot="tip"
+         class="el-upload__tip">
+      <el-progress v-if="uploading"
+                   class="upload-progress"
+                   :stroke-width="3"
+                   :percentage="uploadProgress"></el-progress>
+      <slot name="tip">
+        <p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
+      </slot>
+    </div>
+  </el-upload>
+</template>
+
+<script>
+import OSS from 'ali-oss'
+import OssConfig from './config.js'
+import Util from '@/libs/util'
+export default {
+  props: {
+    // 最大允许上传个数
+    limit: {
+      type: Number,
+      default: 1
+    },
+    // 单个文件最大大小(单位: Mb)
+    maxSize: {
+      type: Number,
+      default: 10
+    },
+    // 是否显示已上传文件列表
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    // 已上传文件列表
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    // 是否要更新fileList（如果要使用自己的fileList，则这个值传false，一般情况不用给这个值）
+    changeFileList: {
+      type: Boolean,
+      default: true
+    },
+    // 已上传文件列表
+    onRemove: {
+      type: Function,
+      default: new Function()
+    },
+  },
+  data () {
+    return {
+      client: null,
+      uploading: false,
+      uploadProgress: 0,
+      showFiles: this.showFileList
+    };
+  },
+  mounted () {
+    this.initOss()
+  },
+  methods: {
+    // 初始化oss
+    initOss () {
+      this.client = new OSS(OssConfig.config)
+    },
+    // 附件上传前
+    beforeUpload (file) {
+      const oversize = file.size / 1024 / 1024 < this.maxSize
+      if (!oversize) Util.warningMsg(`请上传小于${this.maxSize}MB的附件！`)
+      if (oversize) {
+        this.$emit('beforeUpload', file)
+        return true
+      } else {
+        return false
+      }
+    },
+    // 自定义进度条
+    handleProgress (progress) {
+      this.uploadProgress = Number((progress * 100).toFixed(2))
+    },
+    // 自定义上传
+    async handleRequest ({ file }) {
+      try {
+        this.uploadProgress = 0
+        this.uploading = true
+        this.showFiles = false
+        // 上传到阿里云oss
+        const { name } = await this.client.multipartUpload(file.name, file, {
+          progress: this.handleProgress
+        });
+
+        this.uploading = false
+        const url = OssConfig.preUrl + name
+        this.changeFileList && this.$emit('update:fileList', [
+          ...this.fileList,
+          {
+            name: name,
+            url
+          }
+        ])
+
+        this.showFiles = true
+        this.$emit('onSuccess', {
+          format: Util.getFileExt(file.name),
+          name: file.name,
+          url,
+          size: file.size,
+        })
+      } catch (error) { }
+    },
+    uploadError (err, file, fileList) {
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      })
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleExceed (files, fileList) {
+      Util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`);
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+/deep/.upload-progress {
+    max-width: 300px;
+    margin: 10px 0;
+    white-space: nowrap;
+}
+</style>

src/components/upload/upload.js

@@ -0,0 +1,37 @@
+// 阿里云oss上传
+
+import OSS from 'ali-oss'
+import OssConfig from './config'
+import Util from '@/libs/util'
+
+let client = null
+// 初始化oss
+const initOss = () => {
+	if (!client) client = new OSS(OssConfig.config)
+}
+
+export default {
+	// 上传文件
+	upload(file) {
+		initOss()
+		return new Promise(async (resolve, reject) => {
+			try {
+				// 上传到阿里云oss
+				const res = await client.multipartUpload(file.name, file);
+				resolve({
+					format: Util.getFileExt(file.name),
+          name: file.name,
+          url: OssConfig.preUrl + res.name,
+          size: file.size,
+				})
+			} catch (error) {
+				reject()
+			}
+		})
+	},
+	// 删除文件（传完整url，不是没有https的name，因为很多接口没有存name，只存url，所以统一使用url）
+	async del(url) {
+		initOss()
+		await client.delete(url.replace(OssConfig.preUrl, ''));
+	}
+}

src/pages/match/details/index.vue

@@ -694,7 +694,8 @@ import util from '@/libs/util'
 import Setting from "@/setting"
 import Const from '@/const/match'
 import OSS from 'ali-oss'
-import OssConfig from '@/const/oss'
+import OssConfig from '@/components/upload/config.js'
+import Oss from '@/components/upload/upload.js'
 export default {
   name: 'matchdetail',
   data () {
@@ -1505,7 +1506,8 @@ export default {
       util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
     },
     // 删除文件表里的文件
-    handleRemove () {
+    handleRemove (file) {
+      Oss.del(file.url)
       this.fileList = []
       this.curFileId && this.$post(this.api.cCompetitionStageFileDel, [this.curFileId]).then(res => {
         this.curFileId = ''

src/pages/match/list/index.vue

@@ -339,7 +339,8 @@ import Setting from "@/setting"
 import util from "@/libs/util"
 import Bus from '@/libs/bus'
 import OSS from 'ali-oss'
-import OssConfig from '@/const/oss'
+import OssConfig from '@/components/upload/config.js'
+import Oss from '@/components/upload/upload.js'
 export default {
   name: "match",
   data () {
@@ -833,7 +834,8 @@ export default {
       util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
     },
     // 删除文件表里的文件
-    handleRemove () {
+    handleRemove (file) {
+      Oss.del(file.url)
       this.fileList = []
       this.curFileId && this.$post(this.api.cCompetitionStageFileDel, [this.curFileId]).then(res => {
         this.curFileId = ''