阿里云oss封装组件及外部js

src/components/upload/config.js

@@ -0,0 +1,15 @@
+/**
+ * 阿里云oss配置
+ * */
+
+ export default {
+	// oss账号信息
+	config: {
+		region: 'oss-cn-shenzhen',
+		accessKeyId: 'LTAI4FzqQHnk4rozqLZ8jCNj',
+		accessKeySecret: 'mveW7B1OyFoKUkHm8WsxmrjHmkJWHq',
+		bucket: 'huoran'
+	},
+	// 上传成功url前置部分（成功回调没有返回url）
+	preUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/'
+}

src/components/upload/index.vue

@@ -29,7 +29,8 @@
 
 <script>
 import OSS from 'ali-oss'
-import util from '@/libs/util'
+import OssConfig from './config.js'
+import Util from '@/libs/util'
 export default {
   props: {
     // 最大允许上传个数
@@ -77,17 +78,12 @@ export default {
   methods: {
     // 初始化oss
     initOss () {
-      this.client = new OSS({
+      this.client = new OSS(OssConfig.config)
-        region: 'oss-cn-shenzhen',
-        accessKeyId: 'LTAI4FzqQHnk4rozqLZ8jCNj',
-        accessKeySecret: 'mveW7B1OyFoKUkHm8WsxmrjHmkJWHq',
-        bucket: 'huoran'
-      })
     },
     // 附件上传前
     beforeUpload (file) {
       const oversize = file.size / 1024 / 1024 < this.maxSize
-      if (!oversize) util.warningMsg(`请上传小于${this.maxSize}MB的附件！`)
+      if (!oversize) Util.warningMsg(`请上传小于${this.maxSize}MB的附件！`)
       if (oversize) {
         this.$emit('beforeUpload', file)
         return true
@@ -111,7 +107,7 @@ export default {
         });
 
         this.uploading = false
-        const url = 'https://huoran.oss-cn-shenzhen.aliyuncs.com/' + name
+        const url = OssConfig.preUrl + name
         this.changeFileList && this.$emit('update:fileList', [
           ...this.fileList,
           {
@@ -122,7 +118,7 @@ export default {
 
         this.showFiles = true
         this.$emit('onSuccess', {
-          format: util.getFileExt(file.name),
+          format: Util.getFileExt(file.name),
           name: file.name,
           url,
           size: file.size,
@@ -140,7 +136,7 @@ export default {
       return this.$confirm(`确定移除 ${file.name}？`);
     },
     handleExceed (files, fileList) {
-      util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`);
+      Util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`);
     },
   }
 };

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/views/course/contentSettings.vue

@@ -345,6 +345,7 @@
 import { Loading } from "element-ui";
 import Pdf from "@/components/pdf";
 import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
 import axios from 'axios'
 import Util from '@/libs/util'
 
@@ -700,11 +701,8 @@ export default {
           this.$del(`${this.api.deleteChapter}/${id}`).then(res => {
             this.$message.success("删除成功");
             this.getData();
-          }).catch(res => {
+          }).catch(res => { });
-          });
+        }).catch(() => { });
-        })
-        .catch(() => {
-        });
     },
     closeSection () {
       this.isAddSection = false;
@@ -908,6 +906,7 @@ export default {
       })
         .then(() => {
           this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => {
+            row.fileUrl && Oss.del(row.fileUrl)
             this.$message.success("删除成功");
             this.getData();
           }).catch(res => {

src/views/match/add/step1.vue

@@ -12,13 +12,11 @@
                        accept=".jpg,.png,.jpeg,.gif"
                        :on-remove="handleRemove"
                        :on-error="uploadError"
-                       :on-success="uploadSuccess"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
-                       :action="this.api.fileupload"
+                       action=""
-                       :headers="headers"
+                       :http-request="handleRequest">
-                       name="file">
               <img v-if="form.coverUrl"
                    :src="form.coverUrl"
                    class="avatar">
@@ -42,9 +40,8 @@
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
-                       :action="this.api.fileupload"
+                       action=""
-                       :headers="headers"
+                       :http-request="handleRequestLg">
-                       name="file">
               <img v-if="form.carouselUrl"
                    :src="form.carouselUrl"
                    class="avatar-lg">
@@ -274,6 +271,7 @@
 import util from "@/libs/util";
 import quill from "@/components/quill";
 import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
 import { Loading } from 'element-ui'
 export default {
   props: ['editing'],
@@ -588,6 +586,18 @@ export default {
     handleExceed (files, fileList) {
       util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
     },
+    // 封面自定义上传
+    async handleRequest ({ file }) {
+      Oss.upload(file).then(res => {
+        this.form.coverUrl = res.url
+      })
+    },
+    // 封面自定义上传
+    async handleRequestLg ({ file }) {
+      Oss.upload(file).then(res => {
+        this.form.carouselUrl = res.url
+      })
+    },
     uploadSuccess (res) {
       const { coverUrl } = this.form
       coverUrl && this.$del(`${this.api.fileDeletion}?keys=${coverUrl}`).then(res => { }).catch(res => { })
@@ -620,17 +630,16 @@ export default {
     beforeRemove (file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`);
     },
-    handleRemove (file, fileList) {
+    handleRemove () {
-      this.$del(`${this.api.fileDeletion}?keys=${this.form.coverUrl}`).then(res => {
+      Oss.del(this.form.coverUrl)
-        this.form.coverUrl = ''
+      this.form.coverUrl = ''
-      }).catch(res => { })
     },
-    handleLgRemove (file, fileList) {
+    handleLgRemove () {
-      this.$del(`${this.api.fileDeletion}?keys=${this.form.carouselUrl}`).then(res => {
+      Oss.del(this.form.carouselUrl)
-        this.form.carouselUrl = ''
+      this.form.carouselUrl = ''
-      }).catch(res => { })
     },
     handleAnnexRemove (file, fileList) {
+      Oss.del(file.url)
       const { id } = file
       id && this.$post(`${this.api.delComAnnex}?id=${id}`).then(res => { }).catch(res => { })
     },

src/views/match/manage/matchArchList.vue

@@ -369,12 +369,12 @@ export default {
     },
     // 导出(有勾选：就导勾选中的；没有勾选：就导全部)
     exportData () {
+      let { list } = this
       // 有勾选，就带上勾选的id
       if (this.multipleSelection.length) {
-        const ids = this.multipleSelection.map(e => e.reportId)
+        list = this.multipleSelection
-        url += `&ids=${ids.toString()}`
       }
-      axios.post(this.api.exportExperimentalResultsInBatch, this.list, {
+      axios.post(this.api.exportExperimentalResultsInBatch, list, {
         headers: this.headers,
         responseType: 'blob'
       }).then((res) => {

src/views/parnerOperation/learnMg.vue

@@ -295,6 +295,7 @@ import editorConfig from '@/utils/editor'
 import Cropper from '@/components/img-upload/Cropper'
 import Axios from 'axios'
 import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
 
 export default {
   data () {
@@ -625,6 +626,7 @@ export default {
     },
     // 附件删除
     handleRemove (e, fileList) {
+      Oss.del(e.filePath)
       e.id ? this.$post(`${this.api.batchDeletionParnerFile}?ids=${e.id}`).then(res => {
         this.form.fileList = fileList
       }).catch(res => { }) : (this.form.fileList = fileList)

src/views/shop/addProduct/index.vue

@@ -746,6 +746,7 @@ import Editor from '@tinymce/tinymce-vue'
 import editorConfig from '@/utils/editor'
 import Cropper from '@/components/img-upload/Cropper'
 import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
 import Axios from 'axios'
 export default {
   data () {
@@ -1514,6 +1515,7 @@ export default {
       return this.$confirm(`确定移除 ${file.name}？`);
     },
     handleFileRemove (file, fileList) {
+      Oss.del(file.filePath)
       this.form.mallAnnex = fileList
     },
     // 界面图上传前回调

src/views/theoreticalCourse/contentSettings/index.vue

@@ -338,6 +338,7 @@ import Setting from "@/setting";
 import { Loading } from "element-ui";
 import pdf from "@/components/pdf";
 import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
 import axios from 'axios'
 
 export default {
@@ -866,6 +867,7 @@ export default {
       })
         .then(() => {
           this.$del(`${this.api.deleteSubsectionTheoretical}?subsectionId=${row.id}`).then(res => {
+            row.fileUrl && Oss.del(row.fileUrl)
             util.successMsg("删除成功");
             this.getData();
           }).catch(res => {