release(custom): i

src/components/Editor.vue

@@ -21,7 +21,7 @@ import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
 import { onBeforeUnmount, shallowRef, ref } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import { getToken } from '@/utils'
+import api from '@/api'
 
 const props = defineProps({
   valueHtml: {
@@ -36,64 +36,40 @@ const editorRef = shallowRef()
 
 const _ref = ref(null)
 
-const Token = getToken()
-
 const toolbarConfig = {}
 
 const editorConfig = { placeholder: '请输入商品详情...', MENU_CONF: {} }
 
 const htmlValue = computed({
   get() {
-    console.log('get', props.valueHtml)
     return props.valueHtml
   },
   set(value) {
-    console.log('set', props.valueHtml)
     emit('update:valueHtml', value)
   },
 })
 
 editorConfig.MENU_CONF['uploadImage'] = {
-  // 其他配置...
-  // 小于该值就插入 base64 格式（而不上传），默认为 0
-  fieldName: 'file',
-  server: '/store/upload',
   allowedFileTypes: ['image/*'],
-  headers: {
-    Authorization: `Bearer ${Token}`,
-  },
   base64LimitSize: 5 * 1024, // 5kb
   // 超时时间，默认为 10 秒
   timeout: 5 * 1000, // 5 秒
-  // 自定义插入图片
-  customInsert(res, insertFn) {
-    if (res.code === 200) {
-      console.log(res)
-      $message.success('上传成功')
-      insertFn(res.data.data)
-    }
+
+  async customUpload(file, insertFn) {
+    await upFile(file, insertFn)
   },
 }
 
 editorConfig.MENU_CONF['uploadVideo'] = {
-  server: '/store/upload',
-  fieldName: 'file',
   allowedFileTypes: ['video/*'],
-  headers: {
-    Authorization: `Bearer ${Token}`,
-  },
-  // 单个文件上传成功之后
-  customInsert(res, insertFn) {
-    console.log(res)
 
-    // 如果成功了，就把视频的地址，插入到编辑器中
-    insertFn(res.data.data)
+  async customUpload(file, insertFn) {
+    await upFile(file, insertFn)
   },
 }
 
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
-  console.log('销毁')
   const editor = editorRef.value
   if (editor == null) return
   editor.destroy()
@@ -105,6 +81,13 @@ const handleCreated = (editor) => {
     _ref.value.style.zIndex = 10
   })
 }
+
+const upFile = async (file, insertFn) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  const res = await api.uploadImg(formData)
+  insertFn(res.data.data)
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/Upload.vue

@@ -1,12 +1,11 @@
 <template>
   <n-upload
     v-model:file-list="List"
-    action="/store/upload"
-    :headers="headers"
     :max="max"
     list-type="image-card"
+    :custom-request="customRequest"
+    :multiple="multiple"
     @before-upload="beforeUpload"
-    @finish="handleFinish"
     @error="handleError"
   >
     点击上传
@@ -14,9 +13,7 @@
 </template>
 
 <script setup>
-import { getToken } from '@/utils'
-
-const token = getToken()
+import api from '@/api'
 
 const prop = defineProps({
   list: {
@@ -27,14 +24,14 @@ const prop = defineProps({
     type: Number,
     default: 1,
   },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:list'])
 
-const headers = ref({
-  Authorization: `Bearer ${token}`,
-})
-
 const List = computed({
   get() {
     return prop.list
@@ -44,12 +41,6 @@ const List = computed({
   },
 })
 
-const handleFinish = ({ file, event }) => {
-  const res = JSON.parse(event.target.response)
-  file.url = res.data.data
-  return file
-}
-
 const handleError = () => {
   $message.error('上传失败')
 }
@@ -62,6 +53,14 @@ const beforeUpload = (data) => {
   }
   return true
 }
+
+const customRequest = async ({ file, onFinish }) => {
+  const formData = new FormData()
+  formData.append('file', file.file)
+  const res = await api.uploadImg(formData)
+  $message.success(res.msg)
+  onFinish(res.data.data)
+}
 </script>
 
 <style lang="scss" scoped></style>