feat:1.暂时将写游记的头图的截图设置成 图片上传功能。

src/components/CreateNote/HeaderBanner.vue

@@ -29,10 +29,9 @@
       </div>
     </div>
 
-    <!-- style="background-color: transparent" -->
     <van-dialog title="图片剪裁" v-model:show="cropperDialogVisible" width="375">
       <div class="h-full w-full">
-        <img ref="cropperRef" :src="bannerUrl" alt="" />
+        <img ref="cropperRef" :src="cropperImageBase64" alt="" />
         <!-- <vueCropper
           ref="cropperRef"
           :img="cropperImageBase64"
@@ -41,28 +40,31 @@
           centerBox
           fixed
           fixedBox
+          original
           :full="true"
           :fixedNumber="[3.2, 1]"
         ></vueCropper> -->
-        <!-- <vue-cropper
-          v-if="image"
-          :src="image"
-          ref="cropper"
-          :stencil-size="stencilSize"
-          :zoomable="true"
-          :rotatable="true"
-          :background="true"
-          :auto-crop="true"
-          :auto-crop-area="0.8"
-          :guides="true"
-          :center="true"
-          @crop="onCrop"
-        /> -->
       </div>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="cropperDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleCropperOk" :loading="loading">确认</el-button>
+        <div class="flex items-center justify-center space-x-20 pt-10 pb-10">
+          <van-button
+            round
+            plain
+            color="#FF9300"
+            type="primary"
+            @click="cropperDialogVisible = false"
+          >
+            取消
+          </van-button>
+          <van-button
+            round
+            type="primary"
+            @click="handleCropperOk"
+            :loading="loading"
+            color="#FF9300"
+          >
+            确认
+          </van-button>
         </div>
       </template>
     </van-dialog>
@@ -73,30 +75,29 @@
 import { useFileDialog } from '@vueuse/core'
 import icon_image_fill from '~/assets/img/note-create/icon-image-fill.png'
 import image from '~/assets/img/note-create/image.svg'
-// import { VueCropper } from 'vue-cropper'
-// import 'vue-cropper/dist/index.css'
-// import 'https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/index.css'
+import { VueCropper } from 'vue-cropper'
+import 'vue-cropper/dist/index.css'
 
 const bannerUrl = defineModel('bannerUrl')
 
-const emit = defineEmits(['onSelectImage'])
+// const emit = defineEmits(['onSelectImage'])
 
 const { open, onChange } = useFileDialog({
   accept: '.png,.png,.jpeg,.JPG,Png '
 })
 
 const cropperImageBase64 = ref('')
-const fileList = ref([])
+const fileList = ref({})
 onChange((files) => {
-  console.log(files[0], '4445')
-
   if (!files.length) return
   const reader = new FileReader()
   reader.readAsDataURL(files[0])
   reader.onload = () => {
+    console.log(reader.result, '123')
+
     cropperDialogVisible.value = true
     cropperImageBase64.value = reader.result
-    // bannerUrl.value = reader.result
+    fileList.value = files[0]
   }
 })
 
@@ -110,28 +111,26 @@ const loading = ref(false)
 // async
 
 async function handleCropperOk() {
-  cropperRef.value?.getCropBlob(async (data) => {
-    try {
-      // loading.value = true
-      // 此处需上传图片，保存URL
-      const formData = new FormData()
-      console.log(formData, '121222')
-      console.log(data, '5555')
+  // cropperRef.value.getCropBlob(async (data) => {
+  try {
+    // loading.value = true
+    // 此处需上传图片，保存URL
+    const formData = new FormData()
 
-      formData.append('uploadFile', data)
-      formData.append('asImage', true)
-      formData.append('fieldName', 'travelNotesBanner')
-      const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
-        method: 'post',
-        body: formData
-      })
-      const url = res.data.fileUrl
-      bannerUrl.value = url
-      cropperDialogVisible.value = false
-    } finally {
-      loading.value = false
-    }
-  })
+    formData.append('uploadFile', fileList.value)
+    formData.append('asImage', true)
+    formData.append('fieldName', 'travelNotesBanner')
+    const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
+      method: 'post',
+      body: formData
+    })
+    const url = res.data.fileUrl
+    bannerUrl.value = url
+    cropperDialogVisible.value = false
+  } finally {
+    loading.value = false
+  }
+  // })
 }
 </script>
 

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

@@ -443,7 +443,6 @@ const noteJson = reactive(defaultNoteJson)
 watch(noteJson, () => {}, { deep: true })
 
 const id = useRouteQuery('id')
-console.log(noteJson.projectTitle, 'projectTitle')
 
 watch(
   id,