✨ optimized image list interface
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
创建相册
|
||||
</AButton>
|
||||
</div>
|
||||
<image-toolbar :selected="selected" />
|
||||
<image-toolbar :selected="selected"/>
|
||||
<div class="photo-list">
|
||||
<ATabs size="small" :tabBarGutter="50" type="line" tabPosition="top" :tabBarStyle="{position:'unset'}"
|
||||
style="width: 99%;">
|
||||
@@ -37,11 +37,14 @@
|
||||
:iconSize="20"
|
||||
:showSelectedEffect="true"
|
||||
:value="item.id">
|
||||
<AImage :src="item.url"
|
||||
<AImage :src="item.thumbnail"
|
||||
:alt="item.file_name"
|
||||
:key="index"
|
||||
style="height: 200px"
|
||||
:height="200"
|
||||
:previewMask="false"
|
||||
:preview="{
|
||||
src: item.url,
|
||||
}"
|
||||
loading="lazy"/>
|
||||
</CheckCard>
|
||||
</template>
|
||||
@@ -73,7 +76,7 @@ import Vue3JustifiedLayout from "vue3-justified-layout";
|
||||
import 'vue3-justified-layout/dist/style.css';
|
||||
import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
|
||||
import useStore from "@/store";
|
||||
import {queryAllImagesApi} from "@/api/storage";
|
||||
import {getSingleImageApi, queryAllImagesApi} from "@/api/storage";
|
||||
import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
|
||||
|
||||
|
||||
@@ -87,7 +90,9 @@ const options = reactive({
|
||||
|
||||
const images = ref<any[]>([]);
|
||||
|
||||
|
||||
/**
|
||||
* 获取所有图片
|
||||
*/
|
||||
async function getAllImages() {
|
||||
const res: any = await queryAllImagesApi("image", false, "ali", "schisandra-album");
|
||||
if (res && res.code === 200) {
|
||||
@@ -95,6 +100,30 @@ async function getAllImages() {
|
||||
}
|
||||
}
|
||||
|
||||
// const previewUrl = ref<string>("");
|
||||
//
|
||||
// /**
|
||||
// * 获取单张图片
|
||||
// * @param id
|
||||
// */
|
||||
// async function getSingleImage(id: number) {
|
||||
// previewUrl.value = "";
|
||||
// const res: any = await getSingleImageApi(id);
|
||||
// if (res && res.code === 200) {
|
||||
// previewUrl.value = res.data;
|
||||
// setVisible(true);
|
||||
// return;
|
||||
// }
|
||||
// previewUrl.value = "data:image/png;base64,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";
|
||||
// setVisible(true);
|
||||
// }
|
||||
//
|
||||
// const visible = ref<boolean>(false);
|
||||
//
|
||||
// const setVisible = (value): void => {
|
||||
// visible.value = value;
|
||||
// };
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getAllImages();
|
||||
|
||||
@@ -62,6 +62,7 @@ import imageCompression from "browser-image-compression";
|
||||
import exifr from 'exifr';
|
||||
import isScreenshot from "@/utils/imageUtils/isScreenshot.ts";
|
||||
import {getCategoryByLabel} from "@/constant/coco_ssd_label_category.ts";
|
||||
import {generateThumbnail} from "@/utils/imageUtils/generateThumb.ts";
|
||||
|
||||
const predicting = ref<boolean>(false);
|
||||
const progressPercent = ref<number>(0);
|
||||
@@ -145,7 +146,7 @@ async function beforeUpload(file: File, fileList: File[]) {
|
||||
}
|
||||
|
||||
// 提取 EXIF 数据
|
||||
const gpsData = await extractGPSExifData(file);
|
||||
const gpsData: any = await extractGPSExifData(file);
|
||||
if (gpsData) {
|
||||
upload.predictResult.longitude = gpsData.longitude;
|
||||
upload.predictResult.latitude = gpsData.latitude;
|
||||
@@ -210,12 +211,21 @@ const {uploading, send: submitFile, abort} = useRequest(uploadFile, {
|
||||
* @param file
|
||||
*/
|
||||
async function customUploadRequest(file: any) {
|
||||
const compressedFile = await imageCompression(file.file, options);
|
||||
// 生成缩略图
|
||||
const {binaryData, width, height, size} = await generateThumbnail(compressedFile);
|
||||
upload.predictResult.thumb_w = width;
|
||||
upload.predictResult.thumb_h = height;
|
||||
upload.predictResult.thumb_size = size;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.file);
|
||||
if (binaryData) {
|
||||
formData.append("thumbnail", binaryData);
|
||||
}
|
||||
formData.append("data", JSON.stringify({
|
||||
provider: 'ali',
|
||||
bucket: 'schisandra',
|
||||
bucket: 'schisandra-album',
|
||||
fileType: file.file.type,
|
||||
...upload.predictResult,
|
||||
}));
|
||||
@@ -276,14 +286,24 @@ async function extractGPSExifData(file) {
|
||||
if (!supportedFormats.includes(file.type)) {
|
||||
return null;
|
||||
}
|
||||
const options: any = {
|
||||
ifd0: false,
|
||||
exif: false,
|
||||
gps: ['GPSLatitudeRef', 'GPSLatitude', 0x0003, 0x0004],
|
||||
interop: false,
|
||||
ifd1: false // thumbnail
|
||||
};
|
||||
|
||||
// 提取GPS EXIF 数据
|
||||
let {latitude, longitude} = await exifr.gps(file);
|
||||
if (latitude && longitude) {
|
||||
return {latitude, longitude};
|
||||
} else {
|
||||
const gpsData = await exifr.parse(file, options);
|
||||
if (!gpsData) {
|
||||
return null;
|
||||
}
|
||||
const {latitude, longitude} = gpsData;
|
||||
if (latitude && longitude) {
|
||||
return {latitude, longitude};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user