|
@@ -29,10 +29,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <van-dialog title="图片剪裁" v-model:show="cropperDialogVisible" width="375">
|
|
|
- <div class="h-full w-full">
|
|
|
- <img ref="cropperRef" :src="cropperImageBase64" alt="" />
|
|
|
- <!-- <vueCropper
|
|
|
+ <!-- <van-dialog title="图片剪裁" v-model:show="cropperDialogVisible" width="375"> -->
|
|
|
+ <!-- <div class="h-full w-full"> -->
|
|
|
+ <!-- <img ref="cropperRef" :src="cropperImageBase64" alt="" /> -->
|
|
|
+ <!-- <vueCropper
|
|
|
ref="cropperRef"
|
|
|
:img="cropperImageBase64"
|
|
|
autoCrop
|
|
@@ -44,8 +44,8 @@
|
|
|
:full="true"
|
|
|
:fixedNumber="[3.2, 1]"
|
|
|
></vueCropper> -->
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- <template #footer>
|
|
|
<div class="flex items-center justify-center space-x-20 pt-10 pb-10">
|
|
|
<van-button
|
|
|
round
|
|
@@ -66,8 +66,8 @@
|
|
|
确认
|
|
|
</van-button>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </van-dialog>
|
|
|
+ </template> -->
|
|
|
+ <!-- </van-dialog> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -75,63 +75,68 @@
|
|
|
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 { VueCropper } from 'vue-cropper'
|
|
|
+// import 'vue-cropper/dist/index.css'
|
|
|
|
|
|
const bannerUrl = defineModel('bannerUrl')
|
|
|
|
|
|
-// const emit = defineEmits(['onSelectImage'])
|
|
|
-
|
|
|
const { open, onChange } = useFileDialog({
|
|
|
accept: '.png,.png,.jpeg,.JPG,Png '
|
|
|
})
|
|
|
|
|
|
-const cropperImageBase64 = ref('')
|
|
|
-const fileList = ref({})
|
|
|
-onChange((files) => {
|
|
|
- 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
|
|
|
- fileList.value = files[0]
|
|
|
- }
|
|
|
-})
|
|
|
+// const cropperImageBase64 = ref('')
|
|
|
|
|
|
function handleSelectImage() {
|
|
|
open()
|
|
|
}
|
|
|
|
|
|
-const cropperRef = ref(null)
|
|
|
-const cropperDialogVisible = ref(false)
|
|
|
-const loading = ref(false)
|
|
|
-// async
|
|
|
+onChange(async (files) => {
|
|
|
+ if (!files.length) return
|
|
|
+ // const reader = new FileReader()
|
|
|
+ // reader.readAsDataURL(files[0])
|
|
|
+ // reader.onload = () => {
|
|
|
|
|
|
-async function handleCropperOk() {
|
|
|
- // cropperRef.value.getCropBlob(async (data) => {
|
|
|
+ // cropperDialogVisible.value = true
|
|
|
+ // fileList.value = files[0]
|
|
|
+ // }
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('uploadFile', files[0])
|
|
|
+ formData.append('asImage', true)
|
|
|
+ formData.append('fieldName', 'travelNotesBanner')
|
|
|
try {
|
|
|
- // loading.value = true
|
|
|
- // 此处需上传图片,保存URL
|
|
|
- const formData = new FormData()
|
|
|
-
|
|
|
- formData.append('uploadFile', fileList.value)
|
|
|
- formData.append('asImage', true)
|
|
|
- formData.append('fieldName', 'travelNotesBanner')
|
|
|
- const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
|
|
|
+ let { data } = 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
|
|
|
- }
|
|
|
- // })
|
|
|
-}
|
|
|
+ bannerUrl.value = data.fileUrl
|
|
|
+ } catch (error) {}
|
|
|
+})
|
|
|
+
|
|
|
+// const cropperRef = ref(null)
|
|
|
+// const cropperDialogVisible = ref(false)
|
|
|
+// const loading = ref(false)
|
|
|
+// async
|
|
|
+
|
|
|
+// async function handleCropperOk() {
|
|
|
+// try {
|
|
|
+// // 此处需上传图片,保存URL
|
|
|
+// const formData = new FormData()
|
|
|
+
|
|
|
+// 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>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|