319 lines
9.9 KiB
Vue
319 lines
9.9 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import axios from "axios";
|
|||
|
|
import Sortable from "sortablejs";
|
|||
|
|
import UploadForm from "./form.vue";
|
|||
|
|
import { ref, computed } from "vue";
|
|||
|
|
import { useRouter } from "vue-router";
|
|||
|
|
import { message } from "@/utils/message";
|
|||
|
|
import type { UploadFile } from "element-plus";
|
|||
|
|
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
|
|||
|
|
|
|||
|
|
import Add from "@iconify-icons/ep/plus";
|
|||
|
|
import Eye from "@iconify-icons/ri/eye-line";
|
|||
|
|
import Delete from "@iconify-icons/ri/delete-bin-7-line";
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: "PureUpload"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const fileList = ref([]);
|
|||
|
|
const router = useRouter();
|
|||
|
|
const curOpenImgIndex = ref(0);
|
|||
|
|
const dialogVisible = ref(false);
|
|||
|
|
|
|||
|
|
const urlList = computed(() => getKeyList(fileList.value, "url"));
|
|||
|
|
const imgInfos = computed(() => extractFields(fileList.value, "name", "size"));
|
|||
|
|
|
|||
|
|
const getImgUrl = name => new URL(`./imgs/${name}.jpg`, import.meta.url).href;
|
|||
|
|
const srcList = Array.from({ length: 3 }).map((_, index) => {
|
|||
|
|
return getImgUrl(index + 1);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 上传文件前校验 */
|
|||
|
|
const onBefore = file => {
|
|||
|
|
if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
|
|||
|
|
message("只能上传图片");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
const isExceed = file.size / 1024 / 1024 > 2;
|
|||
|
|
if (isExceed) {
|
|||
|
|
message(`单个图片大小不能超过2MB`);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** 超出最大上传数时触发 */
|
|||
|
|
const onExceed = () => {
|
|||
|
|
message("最多上传3张图片，请先删除在上传");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** 移除上传的文件 */
|
|||
|
|
const handleRemove = (file: UploadFile) => {
|
|||
|
|
fileList.value.splice(fileList.value.indexOf(file), 1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** 大图预览 */
|
|||
|
|
const handlePictureCardPreview = (file: UploadFile) => {
|
|||
|
|
curOpenImgIndex.value = fileList.value.findIndex(img => img.uid === file.uid);
|
|||
|
|
dialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getUploadItem = () => document.querySelectorAll("#pure-upload-item");
|
|||
|
|
|
|||
|
|
/** 缩略图拖拽排序 */
|
|||
|
|
const imgDrop = uid => {
|
|||
|
|
const CLASSNAME = "el-upload-list";
|
|||
|
|
const _curIndex = fileList.value.findIndex(img => img.uid === uid);
|
|||
|
|
getUploadItem()?.[_curIndex]?.classList?.add(`${CLASSNAME}__item-actions`);
|
|||
|
|
const wrapper: HTMLElement = document.querySelector(`.${CLASSNAME}`);
|
|||
|
|
Sortable.create(wrapper, {
|
|||
|
|
handle: `.${CLASSNAME}__item`,
|
|||
|
|
onEnd: ({ newIndex, oldIndex }) => {
|
|||
|
|
const oldFile = fileList.value[oldIndex];
|
|||
|
|
fileList.value.splice(oldIndex, 1);
|
|||
|
|
fileList.value.splice(newIndex, 0, oldFile);
|
|||
|
|
// fix: https://github.com/SortableJS/Sortable/issues/232 (firefox is ok, but chromium is bad. see https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
|
|||
|
|
getUploadItem().forEach(ele => {
|
|||
|
|
ele.classList.remove(`${CLASSNAME}__item-actions`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** 下载图片 */
|
|||
|
|
const onDownload = () => {
|
|||
|
|
[
|
|||
|
|
{ name: "巴旦木.jpeg", type: "img" },
|
|||
|
|
{ name: "恭喜发财.png", type: "img" },
|
|||
|
|
{ name: "可爱动物.gif", type: "gif" },
|
|||
|
|
{ name: "pure-upload.csv", type: "other" },
|
|||
|
|
{ name: "pure-upload.txt", type: "other" }
|
|||
|
|
].forEach(img => {
|
|||
|
|
axios
|
|||
|
|
.get(`https://xiaoxian521.github.io/hyperlink/${img.type}/${img.name}`, {
|
|||
|
|
responseType: "blob"
|
|||
|
|
})
|
|||
|
|
.then(({ data }) => {
|
|||
|
|
downloadByData(data, img.name);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-card shadow="never">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<el-link
|
|||
|
|
v-tippy="{
|
|||
|
|
content: '点击查看详细文档'
|
|||
|
|
}"
|
|||
|
|
href="https://element-plus.org/zh-CN/component/upload.html"
|
|||
|
|
target="_blank"
|
|||
|
|
style="font-size: 16px; font-weight: 800"
|
|||
|
|
>
|
|||
|
|
文件上传
|
|||
|
|
</el-link>
|
|||
|
|
</div>
|
|||
|
|
<el-link
|
|||
|
|
class="mt-2"
|
|||
|
|
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
|
|||
|
|
target="_blank"
|
|||
|
|
>
|
|||
|
|
代码位置 src/views/components/upload
|
|||
|
|
</el-link>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-button class="mb-4" text bg @click="onDownload">
|
|||
|
|
点击下载安全文件进行上传测试
|
|||
|
|
</el-button>
|
|||
|
|
<p class="mb-4">
|
|||
|
|
综合示例<span class="text-[14px]">
|
|||
|
|
（ <span class="text-[red]">自动上传</span>
|
|||
|
|
、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件）
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p v-show="fileList.length > 0" class="mb-4">
|
|||
|
|
{{ imgInfos }}
|
|||
|
|
</p>
|
|||
|
|
<el-upload
|
|||
|
|
v-model:file-list="fileList"
|
|||
|
|
drag
|
|||
|
|
multiple
|
|||
|
|
class="pure-upload"
|
|||
|
|
list-type="picture-card"
|
|||
|
|
accept="image/jpeg,image/png,image/gif"
|
|||
|
|
action="https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b"
|
|||
|
|
:limit="3"
|
|||
|
|
:headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }"
|
|||
|
|
:on-exceed="onExceed"
|
|||
|
|
:before-upload="onBefore"
|
|||
|
|
>
|
|||
|
|
<IconifyIconOffline :icon="Add" class="m-auto mt-4" width="30" />
|
|||
|
|
<template #file="{ file }">
|
|||
|
|
<div
|
|||
|
|
v-if="file.status == 'ready' || file.status == 'uploading'"
|
|||
|
|
class="mt-[35%] m-auto"
|
|||
|
|
>
|
|||
|
|
<p class="font-medium">文件上传中</p>
|
|||
|
|
<el-progress
|
|||
|
|
class="mt-2"
|
|||
|
|
:stroke-width="2"
|
|||
|
|
:text-inside="true"
|
|||
|
|
:show-text="false"
|
|||
|
|
:percentage="file.percentage"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div v-else @mouseenter.stop="imgDrop(file.uid)">
|
|||
|
|
<img
|
|||
|
|
class="el-upload-list__item-thumbnail select-none"
|
|||
|
|
:src="file.url"
|
|||
|
|
/>
|
|||
|
|
<span
|
|||
|
|
id="pure-upload-item"
|
|||
|
|
:class="[
|
|||
|
|
'el-upload-list__item-actions',
|
|||
|
|
fileList.length > 1 && '!cursor-move'
|
|||
|
|
]"
|
|||
|
|
>
|
|||
|
|
<span
|
|||
|
|
title="查看"
|
|||
|
|
class="hover:text-primary"
|
|||
|
|
@click="handlePictureCardPreview(file)"
|
|||
|
|
>
|
|||
|
|
<IconifyIconOffline
|
|||
|
|
:icon="Eye"
|
|||
|
|
class="hover:scale-125 duration-100"
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
<span
|
|||
|
|
class="el-upload-list__item-delete"
|
|||
|
|
@click="handleRemove(file)"
|
|||
|
|
>
|
|||
|
|
<span title="移除" class="hover:text-[var(--el-color-danger)]">
|
|||
|
|
<IconifyIconOffline
|
|||
|
|
:icon="Delete"
|
|||
|
|
class="hover:scale-125 duration-100"
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
<!-- 有时文档没写并不代表没有，多看源码好处多多😝 https://github.com/element-plus/element-plus/tree/dev/packages/components/image-viewer/src （emm...这让我想起刚开始写这个项目时，很多东西只有英文或者没有文档，需要看源码时，想笑🥹。那些美好时光都给这些坑了，giao） -->
|
|||
|
|
<el-image-viewer
|
|||
|
|
v-if="dialogVisible"
|
|||
|
|
:initialIndex="curOpenImgIndex"
|
|||
|
|
:url-list="urlList"
|
|||
|
|
:zoom-rate="1.2"
|
|||
|
|
:max-scale="7"
|
|||
|
|
:min-scale="0.2"
|
|||
|
|
@close="dialogVisible = false"
|
|||
|
|
@switch="index => (curOpenImgIndex = index)"
|
|||
|
|
/>
|
|||
|
|
<!-- 将自定义内容插入到body里，有了它在图片预览的时候，想插入个分页器或者别的东东在预览区某个位置就很方便咯（用户需求可以很灵活，开源组件库几乎不可能尽善尽美，很多时候寻找别的解决途径或许更好） -->
|
|||
|
|
<teleport to="body">
|
|||
|
|
<div
|
|||
|
|
v-if="fileList[curOpenImgIndex] && dialogVisible"
|
|||
|
|
effect="dark"
|
|||
|
|
round
|
|||
|
|
size="large"
|
|||
|
|
type="info"
|
|||
|
|
class="img-name"
|
|||
|
|
>
|
|||
|
|
<p class="text-[#fff] dark:text-black">
|
|||
|
|
{{ fileList[curOpenImgIndex].name }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</teleport>
|
|||
|
|
<p class="el-upload__tip">
|
|||
|
|
可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片
|
|||
|
|
</p>
|
|||
|
|
<el-divider />
|
|||
|
|
|
|||
|
|
<p class="mb-4 mt-4">
|
|||
|
|
结合表单校验进行<span class="text-[red]">手动上传</span>
|
|||
|
|
<span class="text-[14px]">
|
|||
|
|
（可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化）
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<div class="flex justify-between">
|
|||
|
|
<UploadForm />
|
|||
|
|
<div>
|
|||
|
|
<p class="text-center">上传接口相关截图</p>
|
|||
|
|
<el-image
|
|||
|
|
class="w-[200px] rounded-md"
|
|||
|
|
:src="srcList[0]"
|
|||
|
|
:preview-src-list="srcList"
|
|||
|
|
fit="cover"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-divider />
|
|||
|
|
|
|||
|
|
<div class="flex flex-wrap">
|
|||
|
|
<p>
|
|||
|
|
裁剪、上传头像请参考
|
|||
|
|
<span
|
|||
|
|
class="font-bold text-[18x] cursor-pointer hover:text-[red]"
|
|||
|
|
@click="router.push({ name: 'SystemUser' })"
|
|||
|
|
>
|
|||
|
|
系统管理-用户管理
|
|||
|
|
</span>
|
|||
|
|
表格操作栏中的上传头像功能
|
|||
|
|
</p>
|
|||
|
|
<p class="text-[red] text-[12px] flex flex-auto items-center justify-end">
|
|||
|
|
免责声明：上传接口使用免费开源的
|
|||
|
|
<el-link
|
|||
|
|
href="https://designer.mocky.io/"
|
|||
|
|
target="_blank"
|
|||
|
|
style="font-size: 16px; font-weight: 800"
|
|||
|
|
>
|
|||
|
|
Mocky
|
|||
|
|
</el-link>
|
|||
|
|
<span class="font-bold text-[18x]"> 请不要上传重要信息 </span
|
|||
|
|
>，如果造成任何损失，我们概不负责
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
:deep(.card-header) {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.header-right {
|
|||
|
|
display: flex;
|
|||
|
|
flex: auto;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.pure-upload) {
|
|||
|
|
.el-upload-dragger {
|
|||
|
|
background-color: transparent;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-name {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 80px;
|
|||
|
|
left: 50%;
|
|||
|
|
z-index: 4000;
|
|||
|
|
padding: 5px 23px;
|
|||
|
|
background-color: var(--el-text-color-regular);
|
|||
|
|
border-radius: 22px;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
|
|||
|
|
/** 将下面的 left: 50%; bottom: 80px; transform: translateX(-50%); 注释掉
|
|||
|
|
* 解开下面 left: 40px; top: 40px; 注释，体验不一样的感觉。啊？还是差强人意，自己调整位置吧🥹
|
|||
|
|
*/
|
|||
|
|
// left: 40px;
|
|||
|
|
// top: 40px;
|
|||
|
|
}
|
|||
|
|
</style>
|