图片上传

parent 5ed31e72
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
</template> </template>
<script setup> <script setup>
import { showImagePreview } from 'vant'; import { showToast, showSuccessToast, showFailToast } from 'vant';
import { selectPictureById } from '@/api/publish' import { selectPictureById } from '@/api/publish'
import { useInitScroll } from '@/hooks/useScroll' import { useInitScroll } from '@/hooks/useScroll'
...@@ -145,66 +145,36 @@ const convertSize = (sizeInKB) => { ...@@ -145,66 +145,36 @@ const convertSize = (sizeInKB) => {
// 下载图片 // 下载图片
const handleDownload = () => { const handleDownload = () => {
xma.downloadFile({ // #ifdef H5-SGY
url: previewImages.value[index.value], // 替换为你要下载的图片URL showToast('请长按保存图片');
success: (res) => { return
if (res.statusCode === 200) { // #endif
// 下载成功后保存图片到相册 saveImage(previewImages.value[index.value]);
saveImage(res.tempFilePath);
} else {
console.error('下载图片失败');
}
},
fail: (err) => {
console.error('下载图片失败', err);
}
});
} }
function saveImage(filePath) { function saveImage(url) {
// 创建一个<a>元素 fetch(url)
.then(response => response.blob())
.then(blob => {
// 创建一个下载链接
const link = document.createElement('a'); const link = document.createElement('a');
link.href = filePath; const objectUrl = URL.createObjectURL(blob);
// 设置下载的文件名 link.href = objectUrl;
// 设置下载的文件名和后缀
link.download = catalog.value.enclosureList[index.value].enclosureDesc + '.jpg'; link.download = catalog.value.enclosureList[index.value].enclosureDesc + '.jpg';
// 触发点击事件 // 触发点击事件
document.body.appendChild(link); link.click(); document.body.appendChild(link);
// 移除该元素 link.click();
// 移除下载链接
document.body.removeChild(link); document.body.removeChild(link);
uni.showToast({ URL.revokeObjectURL(objectUrl);
title: '下载成功', showSuccessToast('下载成功');
icon: 'success'
}) })
.catch(error => {
showFailToast('下载失败');
console.log('下载图片失败', error)
});
} }
// function saveImage(url) {
// fetch(url)
// .then(response => response.blob())
// .then(blob => {
// // 创建一个下载链接
// const link = document.createElement('a');
// const objectUrl = URL.createObjectURL(blob);
// link.href = objectUrl;
// // 设置下载的文件名和后缀
// link.download = catalog.value.enclosureList[index.value].enclosureDesc + '.jpg';
// // 触发点击事件
// document.body.appendChild(link);
// link.click();
// // 移除下载链接
// document.body.removeChild(link);
// URL.revokeObjectURL(objectUrl);
// uni.showToast({
// title: '下载成功',
// icon: 'success'
// })
// })
// .catch(error => {
// uni.showToast({
// title: '下载失败',
// icon: 'none'
// })
// console.log('下载图片失败', error)
// });
// }
</script> </script>
......
<template> <template>
<Header :show="false" backgroundBox="white"> <Header :show="false" backgroundBox="white">
<van-nav-bar title="图组" :left-arrow="true" fixed placeholder @click-left="router.go(-1)" /> <van-nav-bar title="图组" :left-arrow="true" fixed placeholder @click-left="back" />
</Header> </Header>
<div class="container"> <div class="container">
<div class="steps-placeholder" :style="{ height: `${stepsRef?.offsetHeight}px` }"> <div class="steps-placeholder" :style="{ height: `${stepsRef?.offsetHeight}px` }">
...@@ -89,6 +89,10 @@ const setCatalog = () => { ...@@ -89,6 +89,10 @@ const setCatalog = () => {
catalog.value.coverpicture = enclosureLists.value[coverIndex.value].enclosureAddr catalog.value.coverpicture = enclosureLists.value[coverIndex.value].enclosureAddr
} }
const back = () => {
xma.navigateBack()
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(#u-a-c .uni-system-choose-location .nav) { :deep(#u-a-c .uni-system-choose-location .nav) {
...@@ -102,13 +106,13 @@ const setCatalog = () => { ...@@ -102,13 +106,13 @@ const setCatalog = () => {
:deep(#u-a-c .uni-system-choose-location .nav-btn.back) { :deep(#u-a-c .uni-system-choose-location .nav-btn.back) {
background-color: #007aff; background-color: #007aff;
border-radius: 10px; border-radius: 10px;
top: 50px; top: 80px;
left: 10px; left: 10px;
} }
:deep(#u-a-c .uni-system-choose-location .nav-btn.confirm) { :deep(#u-a-c .uni-system-choose-location .nav-btn.confirm) {
background-color: #007aff; background-color: #007aff;
border-radius: 10px; border-radius: 10px;
top: 50px; top: 80px;
right: 10px; right: 10px;
} }
.steps-container { .steps-container {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment