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

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.19.2",
     "clipboard": "^2.0.6",
     "core-js": "^3.19.0",
+    "cos-js-sdk-v5": "^1.4.6",
     "element-ui": "^2.15.6",
     "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/')
@@ -113,6 +124,7 @@ export default {
             if (res.success != true) return failFun('HTTP Error: ' + res.msg)
             succFun(res.data.src)
           }
+
           xhr.send(formData)
         },
       },

src/components/uploadImg/index.vue

@@ -26,6 +26,7 @@
         :before-upload="uploads"
         :before-remove="handleRemove"
         :class="uploadShow ? 'disable' : ''"
+        :http-request="upload"
       >
         <i class="el-icon-plus"></i>
       </el-upload>
@@ -52,6 +53,7 @@
 </template>
 
 <script>
+import { uploadCOS } from '@/utils/upload'
 export default {
   name: 'uploadImg',
   data() {
@@ -124,6 +126,17 @@ export default {
       this.$message.error('请重新上传')
       this.uploadShow = false
     },
+
+    /**
+     * 自定义上传（使用腾讯云COS）
+     * http-request	覆盖action默认的上传行为，可以自定义上传的实现
+     * 如果要用api接口上传去除el-upload的 http-request属性即可
+     */
+    upload(data) {
+      uploadCOS(data.file).then((res) => {
+        this.dialogImageUrl = res
+      })
+    },
   },
   computed: {
     // baseurl

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)
+        }
+      )
+    }
+  })
+}