feat: 新增腾讯云COS上传功能与封装

.eslintrc.js

@@ -25,7 +25,8 @@ module.exports = {
     'no-new-object': 'off', // 禁止使用 Object 构造函数
     "vue/no-v-model-argument": "off",
     'no-prototype-builtins': 'off',
-    'vue/no-mutating-props': 'off'
+    'vue/no-mutating-props': 'off',
+    'vue/script-setup-uses-vars': 'off'
   },
   parser: 'vue-eslint-parser',
 }

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.25.0",
     "clipboard": "^2.0.10",
     "core-js": "^3.21.0",
+    "cos-js-sdk-v5": "^1.4.6",
     "element-plus": "^1.3.0-beta.10",
     "file-saver": "^2.0.5",
     "html2canvas": "1.0.0-alpha.9",

src/components/rightslider/richtextstyle/index.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import { uploadCOS } from '@/utils/upload'
+
 import Editor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver'
 import 'tinymce/skins/ui/oxide/skin.min.css'
@@ -98,6 +100,15 @@ export default {
         theme: 'silver', //主题
         menubar: false,
         images_upload_handler: (blobInfo, succFun, failFun) => {
+          // 腾讯云COS上传开始
+          uploadCOS(blobInfo.blob()).then((res) => {
+            succFun(res)
+          })
+          return
+          //（如果要用api接口上传删除腾讯云COS上传这些代码）
+          // 腾讯云COS上传结束 
+          
+
           var formData = new FormData()
 
           formData.append('path', 'test/')

src/components/uploadImg/index.vue

@@ -25,6 +25,7 @@
         :before-upload="uploads"
         :before-remove="handleRemove"
         :class="uploadShow ? 'disable' : ''"
+        :http-request="upload"
       >
         <i class="el-icon-plus">+</i>
       </el-upload>
@@ -58,6 +59,7 @@
 <script>
 import { reactive, toRefs, computed } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import { uploadCOS } from '@/utils/upload'
 
 export default {
   name: 'uploadImg',
@@ -133,6 +135,17 @@ export default {
         ElMessage.error('请重新上传')
         datas.uploadShow = false
       },
+
+      /**
+       * 自定义上传（使用腾讯云COS）
+       * http-request	覆盖action默认的上传行为，可以自定义上传的实现
+       * 如果要用api接口上传去除el-upload的 http-request属性即可
+       */
+      upload(data) {
+        uploadCOS(data.file).then((res) => {
+          datas.dialogImageUrl = res
+        })
+      },
     }
     // 通过computed获得baseupload
     const baseupload = computed(() => {

src/utils/upload.js

@@ -0,0 +1,37 @@
+const COS = require('cos-js-sdk-v5')
+// 填写自己腾讯云cos中的key和id (密钥)
+// https://console.cloud.tencent.com/cam/capi
+const cos = new COS({
+  SecretId: 'AKIDzmJbcMozu2tTmoZ3FBpCI7fwxjDRO4Tb',
+  SecretKey: 'sTptgCRP5UhcHfoiKfjWyEEzUjiRvA9s',
+})
+
+
+// 腾讯云COS上传文件方法  参数为file文件对象
+export const uploadCOS = (file) => {
+  return new Promise((resolve, reject) => {
+    if (file) {
+      // 执行上传操作
+      cos.putObject(
+        {
+          Bucket: 'git-1304113371' /* 存储桶 */,
+          Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
+          Key: file.name /* 文件名 */,
+          StorageClass: 'STANDARD', // 上传模式, 标准模式
+          Body: file, // 上传文件对象
+          onProgress: (progressData) => {
+            // 上传进度
+            console.log(JSON.stringify(progressData))
+          },
+        },
+        (err, data) => {
+          // 上传成功之后
+          if (data.statusCode === 200) {
+            resolve(`https://${data.Location}`)
+          }
+          if (err) reject(err)
+        }
+      )
+    }
+  })
+}