feat:开发写游记 的预上传图片

src/pages/note-create/index.client.vue

@@ -121,8 +121,9 @@
           </van-field> -->
 
           <div class="w-full h-full flex justify-center items-center">
-            <van-uploader>
+            <van-uploader v-model="fileList" :after-read="afterRead" :multiple="false" >
               <button
+                @click="handleInsertOrEditTitleIndex(index)"
                 class="box-border active:bg-[#000]/[0.1] text-base flex justify-center items-center px-28 py-10 rounded-full border"
               >
                 <div class="h-16 w-16 mr-8">
@@ -132,8 +133,12 @@
                 插入图片
               </button>
             </van-uploader>
+            
           </div>
         </van-cell-group>
+        <div v-if="item.content ">
+              <img :src="item.content" alt="Uploaded Image" />
+        </div>
 
         <div class="w-86 flex justify-between items-center h-16 absolute top-[10px] right-26 z-1">
           <span @click="handleSaveCover(item)" class="text-sm text-black-3">设为封面图</span>
@@ -178,7 +183,7 @@
       class="fixed box-border p-16 shadow-[0_-4px_4px_0px_rgba(0,0,0,0.1)] bottom-0 left-0 w-full h-80 flex justify-between bg-white items-center"
     >
       <div class="flex justify-start items-center h-50">
-        <div class="w-50 text-center">
+        <div class="w-50 text-center"  @click="handleSaveDraft">
           <van-icon name="notes-o" size="24px" />
           <p class="text-sm text-black-3">草稿</p>
         </div>
@@ -420,23 +425,66 @@ function handleSaveCover(item) {
     }
     item.cover = 1
   })
-  ElMessage.success('设置封面成功')
+  showToast('设置封面成功')
 }
 
-//保存为草稿
-// async function handleSaveDraft() {
-//   try {
-//     await request('/website/tourism/publishTravelNotes/saveDraft', {
-//       method: 'post',
-//       body: {
-//         ...noteJson,
-//         id: id.value
-//       }
-//     })
-//     ElMessage.success('草稿保存成功')
-//   } finally {
-//   }
-// }
+const fileList = ref([])
+// 图片上传
+const afterRead = (file) => {
+      // 此时可以自行将文件上传至服务器
+      uploadFile(file)
+      
+
+};
+
+const useAuth = useAuthStore()
+const { token } = storeToRefs(useAuth)
+
+const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}/admin/app/tourismProjectTravelNotesWrite/upload`
+
+const uploadFile = (file) => {
+  // 使用 FormData 来包装文件，模拟表单提交
+  const formData = new FormData();
+  formData.append('file', file);
+  // 这里假设使用 axios 进行文件上传
+  request(uploadUrl, formData, {
+    headers: {
+      Authorization:token,
+      'Content-Type': 'multipart/form-data'
+    }
+  }).then(res => {
+    console.log(res,'img1111');
+    // noteJson.travelNotesContent.map(el=>{
+    //   if (el.type==='image') {
+    //     noteJson.travelNotesContent[editIndex.value].content=''
+    //   }
+    // })
+    
+    
+    // 处理上传成功的逻辑
+    // Toast('上传成功');
+  }).catch(err=> {
+    console.log(err,'img');
+    
+    // 处理上传失败的逻辑
+    // Toast('上传失败，请重试');
+  });
+};
+
+// 保存为草稿
+async function handleSaveDraft() {
+  try {
+    await request('/website/tourism/publishTravelNotes/saveDraft', {
+      method: 'post',
+      body: {
+        ...noteJson,
+        // id: id?.value
+      }
+    })
+    showToast('草稿保存成功')
+  } finally {
+  }
+}
 
 // 预览
 const previewOptions = reactive({