feat: use tiny oss (#375)

close #313

package.json

@@ -19,7 +19,6 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^11.0.1",
-    "ali-oss": "^6.21.0",
     "axios": "^1.7.4",
     "buffer-from": "^1.1.2",
     "class-variance-authority": "^0.7.0",
@@ -46,6 +45,7 @@
     "radix-vue": "^1.9.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "tiny-oss": "^0.5.1",
     "uuid": "^10.0.0",
     "vue": "^3.4.38"
   },

src/components/CodemirrorEditor/UploadImgDialog.vue

@@ -30,6 +30,7 @@ const formAliOSS = ref({
   region: ``,
   path: ``,
   cdnHost: ``,
+  useSSL: true,
 })
 
 const formTxCOS = ref({
@@ -380,6 +381,9 @@ function uploadImage(params) {
           <el-form-item label="Bucket 所在区域" :required="true">
             <el-input v-model.trim="formAliOSS.region" placeholder="如：oss-cn-shenzhen" />
           </el-form-item>
+          <el-form-item label="UseSSL" :required="true">
+            <el-switch v-model="formAliOSS.useSSL" active-text="是" inactive-text="否" />
+          </el-form-item>
           <el-form-item label="自定义 CDN 域名" :required="false">
             <el-input v-model.trim="formAliOSS.cdnHost" placeholder="如：https://imagecdn.alidaodao.com，可不填" />
           </el-form-item>

src/utils/file.js

@@ -1,5 +1,5 @@
 import CryptoJS from 'crypto-js'
-import OSS from 'ali-oss'
+import OSS from 'tiny-oss'
 import * as Minio from 'minio'
 import COS from 'cos-js-sdk-v5'
 import Buffer from 'buffer-from'
@@ -167,23 +167,24 @@ async function qiniuUpload(file) {
 // AliOSS File Upload
 // -----------------------------------------------------------------------
 
-async function aliOSSFileUpload(content, filename) {
+async function aliOSSFileUpload(file) {
-  const dateFilename = getDateFilename(filename)
+  const dateFilename = getDateFilename(file.name)
-  const { region, bucket, accessKeyId, accessKeySecret, cdnHost, path }
+  const { region, bucket, accessKeyId, accessKeySecret, useSSL, cdnHost, path }
     = JSON.parse(localStorage.getItem(`aliOSSConfig`))
-  const buffer = Buffer(content, `base64`)
+  const dir = path ? `${path}/${dateFilename}` : dateFilename
-  const dir = `${path}/${dateFilename}`
+  const secure = useSSL === undefined || useSSL
+  const protocol = secure ? `https` : `http`
   const client = new OSS({
     region,
     bucket,
     accessKeyId,
     accessKeySecret,
+    secure,
   })
+
   try {
-    const res = await client.put(dir, buffer)
+    await client.put(dir, file)
-    if (cdnHost === ``)
+    return cdnHost ? `${cdnHost}/${dir}` : `${protocol}://${bucket}.${region}.aliyuncs.com/${dir}`
-      return res.url
-    return `${cdnHost}/${path === `` ? dateFilename : dir}`
   }
   catch (e) {
     return Promise.reject(e)
@@ -290,7 +291,7 @@ async function formCustomUpload(content, file) {
       util: {
         axios: fetch, // axios 实例
         CryptoJS, // 加密库
-        OSS, // ali-oss
+        OSS, // ali-oss(tiny-oss)
         COS, // cos-js-sdk-v5
         Buffer, // buffer-from
         uuidv4, // uuid
@@ -315,7 +316,7 @@ function fileUpload(content, file) {
   !imgHost && localStorage.setItem(`imgHost`, `default`)
   switch (imgHost) {
     case `aliOSS`:
-      return aliOSSFileUpload(content, file.name)
+      return aliOSSFileUpload(file)
     case `minio`:
       return minioFileUpload(content, file.name)
     case `txCOS`:

src/utils/index.js

@@ -2,8 +2,8 @@ import juice from 'juice'
 
 import { format } from 'prettier/standalone'
 import * as prettierPluginMarkdown from 'prettier/plugins/markdown'
-import * as prettierPluginBabel from 'prettier/plugins/babel';
+import * as prettierPluginBabel from 'prettier/plugins/babel'
-import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettierPluginEstree from 'prettier/plugins/estree'
 import * as prettierPluginCss from 'prettier/plugins/postcss'
 import { prefix } from '@/config'
 

src/views/CodemirrorEditor.vue

@@ -163,7 +163,6 @@ function uploadImage(file, cb) {
   toBase64(file)
     .then(base64Content => fileApi.fileUpload(base64Content, file))
     .then((url) => {
-      console.log(url)
       if (cb) {
         cb(url)
       }
@@ -298,7 +297,6 @@ function mdLocalToRemote() {
         .replace(`](${item.matchStr})`, `](${item.url})`)
     })
     editor.value.setValue(md.str)
-    console.log(`resList`, resList, md.str)
   }
 
   dom.ondragover = evt => evt.preventDefault()