dsedwe

.env.development

@@ -3,3 +3,5 @@ NODE_ENV = 'development'
 VITE_APP_BASE_API = 'https://ddbs.1024tool.vip/'
 VITE_SERVE = "https://ddbs.1024tool.vip/"
 # VITE_SERVE = "http://192.168.210.29:18100/"
+VITE_OSS_ACCESS_KEY_ID = "LTAI5tCpvXC17uuPwWvb5oRo"
+VITE_OSS_ACCESS_KEY_SECRET = "44EqDghVI0UVF0rVaea7gwOsPkXZ1z"

.env.production

@@ -3,3 +3,5 @@ NODE_ENV = 'production'
 VITE_APP_BASE_API = 'https://tools.1024tool.vip/'
 VITE_SERVE = "https://tools.1024tool.vip/"
 
+VITE_OSS_ACCESS_KEY_ID = "LTAI5tCpvXC17uuPwWvb5oRo"
+VITE_OSS_ACCESS_KEY_SECRET = "44EqDghVI0UVF0rVaea7gwOsPkXZ1z"

package.json

@@ -20,6 +20,7 @@
     "@element-plus/icons-vue": "2.1.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "next",
+    "ali-oss": "^6.23.0",
     "axios": "^1.4.0",
     "default-passive-events": "^2.0.0",
     "echarts": "^5.6.0",

src/api/upload.js

@@ -0,0 +1,19 @@
+
+import request from '@/utils/request'
+
+export const getCode = () =>{ 
+  return request({
+    url: 'admin/policy_token',
+    method: 'post',
+  })
+}
+
+export const uploadFile = (data) =>{
+
+  request({
+    url: 'https://image-fudan.oss-cn-beijing.aliyuncs.com',
+    method: 'get',
+    data
+  })
+
+}

src/router/index.ts

@@ -99,7 +99,6 @@ const whiteList = ['/login']
 router.beforeEach(async (to, from, next) => {
   // Nprogress.start()
   const token = GET_TOKEN()
-  console.log(token)
   if (token) {
     if (to.path === '/login') {
       next('/index')

src/views/news/addNew.vue

@@ -28,7 +28,7 @@
             </div>
 
         </div>
-
+<input type="file" @change="handleUpload" />
 
 
         <el-dialog v-model="dialogPreview" title="文章预览" width="1000px">
@@ -49,13 +49,15 @@
 <script setup>
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { Loading } from '@element-plus/icons-vue'
-import { onBeforeUnmount, onUnmounted , ref, reactive, shallowRef, onMounted, computed, getCurrentInstance, nextTick } from 'vue'
+import { onBeforeUnmount, onUnmounted, ref, reactive, shallowRef, onMounted, computed, getCurrentInstance, nextTick } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { addNews, editNews } from '@/api/news'
+import { getCode } from '@/api/upload'
 
 import { useRoute, useRouter } from 'vue-router'
 import { DomEditor } from '@wangeditor/editor'
 
+import OSS from 'ali-oss'
 
 const ossurl = 'https://image-fudan.oss-cn-beijing.aliyuncs.com'
 
@@ -77,10 +79,7 @@ const valueText = ref('')
 
 const characterCount = ref(0)
 const toolbarConfig = {
-    excludeKeys: [
+
-        'group-image',
-        'group-video',
-    ]
 }
 
 
@@ -92,46 +91,87 @@ const editorConfig = {
 
 editorConfig.MENU_CONF['uploadImage'] = {
     // 上传图片的配置
-    server: import.meta.env.VITE_API_BASE_URL + '/api/upload', // 使用环境变量中的API基础URL
+    // server: '', // 使用环境变量中的API基础URL
-    // 上传图片的最大体积限制，默认为 10M
+    // fieldName: 'your-custom-name',
-    maxFileSize: 5 * 1024 * 1024, // 5M
+    // // 上传图片的最大体积限制，默认为 10M
-    // 上传图片的类型限制
+    // maxFileSize: 5 * 1024 * 1024, // 5M
-    allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+    // // 上传图片的类型限制
-    // 自定义上传参数
+    // allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
-    meta: {
+    // // 自定义上传参数
-        token: localStorage.getItem('token') || ''
+    // meta: {
-    },
+    //     token: localStorage.getItem('token') || ''
-    // 自定义添加 http 请求头
+    // },
-    headers: {
+    // // 自定义添加 http 请求头
-        Authorization: 'Bearer ' + (localStorage.getItem('token') || '')
+    // headers: {
-    },
+    //     Authorization: 'Bearer ' + (localStorage.getItem('token') || '')
-    // 上传之前触发
+    // },
-    onBeforeUpload(file) {
+    // // 上传之前触发
-        console.log('准备上传图片', file)
+    // onBeforeUpload(file) {
-        return file // 返回file继续上传
+    //     console.log('准备上传图片', file)
-    },
+    //     return file // 返回file继续上传
-    // 上传成功触发
+    // },
-    onSuccess(file, res) {
+    // // 上传成功触发
-        console.log('图片上传成功', file, res)
+    // onSuccess(file, res) {
-    },
+    //     console.log('图片上传成功', file, res)
-    // 上传失败触发
+    // },
-    onError(file, err, res) {
+    // // 上传失败触发
-        console.log('图片上传失败', file, err, res)
+    // onError(file, err, res) {
-        // 可以自定义错误提示
+    //     console.log('图片上传失败', file, err, res)
-        ElNotification.error('图片上传失败，请重试')
+    //     // 可以自定义错误提示
-    },
+    //     ElNotification.error('图片上传失败，请重试')
+    // },
     // 自定义插入图片
-    customInsert(res, insertFn) {
+    // customInsert(res, insertFn) {
-        // res 即服务端的返回结果
+    //     console.log('自定义插入图片', res, insertFn)
-        if (res.code === 200 && res.data) {
+    //     // res 即服务端的返回结果
-            // 从响应结果中获取图片URL
+    //     if (res.code === 200 && res.data) {
-            const url = res.data.url || res.data
+    //         // 从响应结果中获取图片URL
-            // 调用插入图片的函数
+    //         const url = res.data.url || res.data
-            insertFn(url)
+    //         // 调用插入图片的函数
-        } else {
+    //         insertFn(url)
-            ElNotification.error('图片插入失败')
+    //     } else {
+    //         ElNotification.error('图片插入失败')
+    //     }
+    // }
+    // 自定义上传
+    async customUpload(file, insertFn) {
+        try {
+            const formData = new FormData()
+            formData.append('file', file)
+            const code = await getCode()
+            const client = new OSS({
+                region: "oss-cn-beijing",
+                authorizationV4: true,
+                accessKeyId: import.meta.env.VITE_OSS_ACCESS_KEY_ID,
+                accessKeySecret: import.meta.env.VITE_OSS_ACCESS_KEY_SECRET,
+                stsToken: code.token,
+                bucket: "image-fudan",
+            });
+
+            // Generate unique filename with original extension
+            const fileExt = file.name.split('.').pop()
+            const fileName = `${Date.now()}-${Math.random().toString(36).substring(2)}.${fileExt}`
+
+            const options = {
+                meta: { temp: "demo" },
+                mime: file.type,
+                headers: { "Content-Type": file.type },
+            };
+
+            const result = await client.put(fileName, file, options);
+            console.log('Upload result:', result);
+
+            // Construct the full URL and call insertFn
+            const url = `${ossurl}/${fileName}`;
+            insertFn(url, file.name, url);
+        } catch (error) {
+            console.error('Upload failed:', error);
+            ElNotification.error('图片上传失败，请重试');
         }
-    }
+    },
+}
+const handleUpload = (e) => {
+    console.log(e.target.files[0])
 }
 
 editorConfig.MENU_CONF['uploadVideo'] = {
@@ -153,7 +193,7 @@ editorConfig.MENU_CONF['uploadVideo'] = {
 
 const handleSaveArticle = () => {
 
-    if(route.query.id){
+    if (route.query.id) {
         editNews({
             title: newTitle.value,
             content: valueHtml.value
@@ -197,10 +237,10 @@ const handleCreated = (editor) => {
         characterCount.value = valueText.value.length
     })
 
-//     const toolbar = DomEditor.getToolbar(editor)
+    //     const toolbar = DomEditor.getToolbar(editor)
 
-// const curToolbarConfig = toolbar.getConfig()
+    // const curToolbarConfig = toolbar.getConfig()
-// console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
+    // console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
 }
 
 
@@ -222,7 +262,7 @@ const handlePreviewArticle = () => {
 
 
 onMounted(() => {
-    if(route.query.id){
+    if (route.query.id) {
         newTitle.value = sessionStorage.getItem('title')
     }
 })
@@ -258,16 +298,20 @@ app.appContext.app.directive('auto-resize', vAutoResize)
 .container {
     width: 100%;
     height: 100%;
-    .toolbar-box{
+
+    .toolbar-box {
         height: 80px;
     }
+
     :deep(.el-radio__label) {
         white-space: normal;
     }
-    .editor-box-content{
+
+    .editor-box-content {
         padding: 0 16px;
         height: calc(100% - 130px);
     }
+
     .title-input {
         width: 100%;
         height: 50px;
@@ -290,8 +334,7 @@ app.appContext.app.directive('auto-resize', vAutoResize)
 
 
 
-            .editor {
+            .editor {}
-            }
 
             .editor-btn-box {
                 width: 100%;
@@ -564,7 +607,8 @@ app.appContext.app.directive('auto-resize', vAutoResize)
         padding: 0;
     }
 
-    .drawer-content, .drawer-content2 {
+    .drawer-content,
+    .drawer-content2 {
         padding: 20px;
         padding-top: 0;
         margin-top: 20px;
@@ -691,14 +735,23 @@ app.appContext.app.directive('auto-resize', vAutoResize)
     }
 
     @keyframes loadingDots {
-        0% { opacity: 0.2; }
+        0% {
-        20% { opacity: 1; }
+            opacity: 0.2;
-        100% { opacity: 0.2; }
+        }
+
+        20% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0.2;
+        }
     }
 
     .article-preview {
         padding: 10px;
         height: 100%;
+
         .article-preview-title {
             font-size: 16px;
             font-weight: 600;
@@ -746,11 +799,12 @@ app.appContext.app.directive('auto-resize', vAutoResize)
         background-color: var(--el-fill-color-blank);
         border-radius: 6px;
         padding: 15px;
-    // min-height: 100px;
+        // min-height: 100px;
         // max-height: 200px;
         overflow-y: auto;
         height: 200px;
         display: flex;
+
         pre {
             line-height: 18px;
             white-space: pre-wrap;
@@ -785,7 +839,8 @@ app.appContext.app.directive('auto-resize', vAutoResize)
             // }
         }
     }
-    .drawer-footer{
+
+    .drawer-footer {
         display: flex;
         justify-content: space-between;
     }

src/views/news/upload.js

@@ -1,12 +0,0 @@
-export default uploadFile = (data) =>{
-
-
-    
-
-  request({
-    url: 'https://image-fudan.oss-cn-beijing.aliyuncs.com',
-    method: 'get',
-    data
-  })
-
-}