You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.5 KiB
86 lines
2.5 KiB
<template>
|
|
<el-upload ref="uploadRef" action="#" :on-change="uploadFile" list-type="picture-card" :auto-upload="false"
|
|
:file-list="fileList" :show-file-list="true" :limit="3" :on-remove="handleRemove" :on-exceed="moreLimit">
|
|
<el-icon>
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
declare const __APP_BASE_URL__: string;
|
|
import { Plus } from "@element-plus/icons-vue";
|
|
import type {
|
|
UploadFile,
|
|
UploadUserFile,
|
|
UploadFiles
|
|
} from "element-plus";
|
|
import { ref } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { uploadImageApi } from "../api/img/index";
|
|
import type { NewType } from "../type/baseType"
|
|
//图片上传组件的ref属性
|
|
const uploadRef = ref();
|
|
//注册事件
|
|
const emits = defineEmits(["getImg"]);
|
|
|
|
const newImgRes = ref<NewType>({
|
|
newImgUrl: [],
|
|
deleteImgUrl: [],
|
|
});
|
|
|
|
//图片上传的数据
|
|
type PropType = {
|
|
fileList: UploadUserFile[];
|
|
oldUrl: Array<{ url: string }>;
|
|
};
|
|
const props = withDefaults(defineProps<PropType>(), {
|
|
fileList: () => [],
|
|
oldUrl: () => [],
|
|
});
|
|
//删除图片
|
|
const handleRemove = (file: UploadFile) => {
|
|
if (props.oldUrl.some(item => item.url === file.name)) {
|
|
newImgRes.value.deleteImgUrl.push({ url: file.name })
|
|
emits("getImg", newImgRes.value);
|
|
} else {
|
|
let images = newImgRes.value.newImgUrl.filter((item) => item.url != file.name);
|
|
newImgRes.value.newImgUrl = images;
|
|
emits("getImg", newImgRes.value);
|
|
}
|
|
};
|
|
//文件个数超出
|
|
const moreLimit = (files: File[], uploadFiles: UploadUserFile[]) => {
|
|
ElMessage.warning("最多只能上传" + uploadFiles.length + "张图片!");
|
|
};
|
|
//图片上传
|
|
const uploadFile = async (file: any) => {
|
|
//判断选择的图片是不是图片类型
|
|
const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
|
|
const isImg = typeArr.indexOf(file.raw.type) !== -1;
|
|
const isMore3M = file.size / 1024 / 1024 < 3;
|
|
if (!isImg) {
|
|
ElMessage.warning("只能上传图片类型!");
|
|
uploadRef.value?.clearFiles();
|
|
return;
|
|
}
|
|
if (!isMore3M) {
|
|
ElMessage.warning("图片大小不能超过3M!");
|
|
uploadRef.value?.clearFiles();
|
|
return;
|
|
}
|
|
//数据提交
|
|
const formData = new FormData();
|
|
formData.append("file", file.raw);
|
|
let res = await uploadImageApi(formData);
|
|
if (res && res.code == 200 && res.data) {
|
|
ElMessage.success("图片上传成功!");
|
|
const baseUrl = __APP_BASE_URL__;
|
|
file.name = baseUrl + res.data;
|
|
newImgRes.value.newImgUrl.push({ url: baseUrl + res.data });
|
|
emits("getImg", newImgRes.value);
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped></style>
|