529 lines
13 KiB
Plaintext
529 lines
13 KiB
Plaintext
<script lang="ts">
|
|
export default {
|
|
name: "LayUpload",
|
|
};
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import "./index.less";
|
|
import { Recordable } from "../../types";
|
|
import { layer } from "@layui/layer-vue";
|
|
import {
|
|
computed,
|
|
ComputedRef,
|
|
getCurrentInstance,
|
|
nextTick,
|
|
onMounted,
|
|
onUnmounted,
|
|
ref,
|
|
useSlots,
|
|
withDefaults,
|
|
watch,
|
|
} from "vue";
|
|
import { templateRef } from "@vueuse/core";
|
|
import { LayLayer } from "@layui/layer-vue";
|
|
import LayButton from "../button/index.vue";
|
|
import Cropper from "cropperjs";
|
|
import { useI18n } from "../../language";
|
|
|
|
export interface LayerButton {
|
|
text: string;
|
|
callback: Function;
|
|
}
|
|
|
|
export interface LayerModal {
|
|
title?: string;
|
|
resize?: boolean;
|
|
move?: boolean;
|
|
maxmin?: boolean;
|
|
offset?: string[];
|
|
content?: string;
|
|
shade?: boolean;
|
|
shadeClose?: boolean;
|
|
shadeOpacity?: number;
|
|
zIndex?: number;
|
|
type?: "component" | "iframe";
|
|
closeBtn?: boolean;
|
|
area: string[];
|
|
btn?: LayerButton[];
|
|
btnAlign?: "l" | "r" | "c";
|
|
anim?: boolean;
|
|
isOutAnim?: boolean;
|
|
}
|
|
|
|
export interface CutOptions {
|
|
layerOption: LayerModal;
|
|
copperOption?: typeof Cropper;
|
|
}
|
|
|
|
export interface UploadProps {
|
|
url?: string;
|
|
data?: any;
|
|
headers?: Recordable;
|
|
acceptMime?: string;
|
|
field?: string;
|
|
size?: number;
|
|
multiple?: boolean;
|
|
number?: number;
|
|
drag?: boolean;
|
|
disabled?: boolean;
|
|
disabledPreview?: boolean;
|
|
cut?: boolean;
|
|
cutOptions?: CutOptions;
|
|
text?: string;
|
|
dragText?: string;
|
|
modelValue?: any;
|
|
auto?: boolean;
|
|
}
|
|
|
|
const getCutDownResult = () => {
|
|
if (_cropper) {
|
|
const canvas = _cropper.getCroppedCanvas();
|
|
let imgData = canvas.toDataURL('"image/png"');
|
|
let currentTimeStamp = new Date().valueOf();
|
|
let orgInfo = activeUploadFiles.value[0];
|
|
emit(
|
|
"cutdone",
|
|
Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo })
|
|
);
|
|
let newFile = dataURLtoFile(imgData);
|
|
if (!props.auto) {
|
|
emit("update:modelValue", [newFile]);
|
|
clearLightCutEffect();
|
|
return;
|
|
}
|
|
commonUploadTransaction([newFile]);
|
|
nextTick(() => clearAllCutEffect());
|
|
} else {
|
|
errorF(cutInitErrorMsg.value);
|
|
}
|
|
};
|
|
|
|
const closeCutDownModal = () => {
|
|
let currentTimeStamp = new Date().valueOf();
|
|
emit("cutcancel", Object.assign({ currentTimeStamp }));
|
|
nextTick(() => clearAllCutEffect());
|
|
};
|
|
|
|
const clearAllCutEffect = () => {
|
|
activeUploadFiles.value = [];
|
|
activeUploadFilesImgs.value = [];
|
|
innerCutVisible.value = false;
|
|
(orgFileInput.value as HTMLInputElement).value = "";
|
|
_cropper = null;
|
|
};
|
|
|
|
const clearLightCutEffect = () => {
|
|
activeUploadFiles.value = [];
|
|
activeUploadFilesImgs.value = [];
|
|
innerCutVisible.value = false;
|
|
_cropper = null;
|
|
};
|
|
|
|
const { t } = useI18n();
|
|
const text = computed(() => {
|
|
return props.text ? props.text : t("upload.text");
|
|
});
|
|
const dragText = computed(() => {
|
|
return props.dragText ? props.dragText : t("upload.dragText");
|
|
});
|
|
const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
|
|
const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
|
|
const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));
|
|
const occurFileSizeErrorMsg = computed(() => t("upload.occurFileSizeErrorMsg"));
|
|
const cutInitErrorMsg = computed(() => t("upload.cutInitErrorMsg"));
|
|
const uploadSuccess = computed(() => t("upload.uploadSuccess"));
|
|
const startUploadMsg = computed(() => t("upload.startUploadMsg"));
|
|
const cannotSupportCutMsg = computed(() => t("upload.cannotSupportCutMsg"));
|
|
const title = computed(() => t("upload.title"));
|
|
const confirmBtn = computed(() => t("upload.confirmBtn"));
|
|
const cancelBtn = computed(() => t("upload.cancelBtn"));
|
|
|
|
let defaultCutLayerOption = computed<LayerModal>(() => {
|
|
return {
|
|
type: "component",
|
|
title: title.value,
|
|
shade: true,
|
|
shadeClose: true,
|
|
area: ["640px", "640px"],
|
|
btn: [
|
|
{ text: confirmBtn.value, callback: getCutDownResult },
|
|
{ text: cancelBtn.value, callback: closeCutDownModal },
|
|
],
|
|
};
|
|
});
|
|
|
|
const props = withDefaults(defineProps<UploadProps>(), {
|
|
field: "file",
|
|
acceptMime: "MIME_type",
|
|
size: 0,
|
|
multiple: false,
|
|
number: 0,
|
|
drag: false,
|
|
disabled: false,
|
|
disabledPreview: false,
|
|
cut: false,
|
|
cutOptions: void 0,
|
|
modelValue: null,
|
|
auto: true,
|
|
});
|
|
|
|
const slot = useSlots();
|
|
const slots = slot.default && slot.default();
|
|
const context = getCurrentInstance();
|
|
const emit = defineEmits([
|
|
"choose",
|
|
"chooseAfter",
|
|
"before",
|
|
"done",
|
|
"error",
|
|
"cutdone",
|
|
"cutcancel",
|
|
"update:modelValue",
|
|
]);
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
() => {
|
|
if (!props.modelValue) {
|
|
clearAllCutEffect();
|
|
}
|
|
}
|
|
);
|
|
|
|
const isDragEnter = ref(false);
|
|
const activeUploadFiles = ref<any[]>([]);
|
|
const activeUploadFilesImgs = ref<any[]>([]);
|
|
const orgFileInput = templateRef<HTMLElement>("orgFileInput");
|
|
|
|
let _cropper: any = null;
|
|
let computedCutLayerOption: ComputedRef<LayerModal>;
|
|
|
|
if (props.cutOptions && props.cutOptions.layerOption) {
|
|
computedCutLayerOption = computed(() =>
|
|
Object.assign(defaultCutLayerOption, props.cutOptions.layerOption)
|
|
);
|
|
} else {
|
|
computedCutLayerOption = computed(() => defaultCutLayerOption.value);
|
|
}
|
|
|
|
interface localUploadTransaction {
|
|
url: string;
|
|
files: File[] | Blob[];
|
|
[propMame: string]: any;
|
|
}
|
|
|
|
interface localUploadOption {
|
|
url: string;
|
|
[propMame: string]: any;
|
|
}
|
|
|
|
const innerCutVisible = ref<boolean>(false);
|
|
|
|
const localUploadTransaction = (option: localUploadTransaction) => {
|
|
const { url, files } = option;
|
|
let formData = new FormData();
|
|
if (url.length <= 5) {
|
|
errorF(urlErrorMsg.value);
|
|
return;
|
|
}
|
|
if (Array.isArray(files) && files.length > 0) {
|
|
for (let i = 0; i < files.length; i++) {
|
|
let _file = files[i];
|
|
formData.append(props.field + "[" + i + "]", _file);
|
|
}
|
|
}
|
|
if (props.data && props.data instanceof Object) {
|
|
let _requestDate = props.data;
|
|
for (const key in _requestDate) {
|
|
formData.append(key, _requestDate[key]);
|
|
}
|
|
}
|
|
let utimer = window.setTimeout(() => {
|
|
localUpload({ url, formData }, function () {
|
|
clearTimeout(utimer);
|
|
});
|
|
}, 200);
|
|
};
|
|
|
|
const dataURLtoFile = (dataurl: string) => {
|
|
let arr: any[] = dataurl.split(",");
|
|
let mime = "";
|
|
if (arr.length > 0) {
|
|
mime = arr[0].match(/:(.*?);/)[1];
|
|
}
|
|
let bstr = atob(arr[1]);
|
|
let n = bstr.length;
|
|
let u8arr = new Uint8Array(n);
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new Blob([u8arr], { type: mime });
|
|
};
|
|
|
|
const errorF = (errorText: string) => {
|
|
let currentTimeStamp = new Date().valueOf();
|
|
let errorMsg = errorText ? errorText : defaultErrorMsg;
|
|
errorMsg = `layui-vue:${errorMsg}`;
|
|
console.warn(errorMsg);
|
|
layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
|
|
emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
|
|
};
|
|
|
|
const localUpload = (option: localUploadOption, callback: Function) => {
|
|
let xhr: XMLHttpRequest = new XMLHttpRequest();
|
|
let url = option.url;
|
|
let formData = option.formData;
|
|
const cb = callback;
|
|
xhr.onreadystatechange = function () {
|
|
let currentTimeStamp = new Date().valueOf();
|
|
if (xhr.readyState === 1) {
|
|
if (
|
|
(xhr.status >= 200 && xhr.status <= 300) ||
|
|
xhr.status === 304 ||
|
|
xhr.status == 0
|
|
) {
|
|
let successText = startUploadMsg.value;
|
|
emit(
|
|
"before",
|
|
Object.assign({ currentTimeStamp, msg: successText, ...option })
|
|
);
|
|
}
|
|
} else if (xhr.readyState === 4) {
|
|
let successText = xhr.responseText ? xhr.responseText : uploadSuccess;
|
|
if (
|
|
(xhr.status >= 200 && xhr.status <= 300) ||
|
|
xhr.status === 304 ||
|
|
xhr.status == 0
|
|
) {
|
|
let data = xhr.responseText;
|
|
emit("done", { currentTimeStamp, msg: successText, data: data });
|
|
}
|
|
}
|
|
};
|
|
xhr.open("post", url, true);
|
|
if (props.headers) {
|
|
for (let key in props.headers) {
|
|
xhr.setRequestHeader(key, props.headers[key]);
|
|
}
|
|
} else {
|
|
xhr.setRequestHeader("Accept", "application/json, text/javascript");
|
|
}
|
|
let currentTimeStamp = new Date().valueOf();
|
|
emit("before", Object.assign(option, currentTimeStamp));
|
|
xhr.send(formData);
|
|
if (cb && typeof cb == "function") {
|
|
cb();
|
|
}
|
|
clearAllCutEffect();
|
|
};
|
|
|
|
const filetoDataURL = (file: File, fn: Function) => {
|
|
const reader = new FileReader();
|
|
reader.onloadend = function (e: any) {
|
|
fn(e.target.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const uploadChange = (e: any) => {
|
|
e.preventDefault();
|
|
const _files = [...(e.target.files || e.dataTransfer.files)];
|
|
if (props.multiple && props.number != 0 && props.number < _files.length) {
|
|
errorF(numberErrorMsg.value);
|
|
return;
|
|
}
|
|
if (props.size && props.size != 0) {
|
|
for (let i = 0; i < _files.length; i++) {
|
|
let _file = _files[i];
|
|
let _size = _file.size;
|
|
if (_size > props.size * 1024) {
|
|
errorF(occurFileSizeErrorMsg.value);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
for (let item of _files) {
|
|
activeUploadFiles.value.push(item);
|
|
filetoDataURL(item, function (res: any) {
|
|
activeUploadFilesImgs.value.push(res);
|
|
});
|
|
}
|
|
let arm1 =
|
|
props.cut &&
|
|
props.acceptMime.indexOf("image") != -1 &&
|
|
props.multiple == false;
|
|
|
|
let arm2 =
|
|
props.cut &&
|
|
props.acceptMime.indexOf("image") != -1 &&
|
|
props.multiple == true;
|
|
|
|
if (arm1) {
|
|
innerCutVisible.value = true;
|
|
setTimeout(() => {
|
|
let _imgs = document.getElementsByClassName("_lay_upload_img");
|
|
if (_imgs && _imgs.length > 0) {
|
|
let _img = _imgs[0];
|
|
// @ts-ignore
|
|
_cropper = new Cropper(_img, {
|
|
aspectRatio: 16 / 9,
|
|
});
|
|
} else {
|
|
clearAllCutEffect();
|
|
}
|
|
}, 200);
|
|
} else {
|
|
if (arm2) {
|
|
console.warn(cannotSupportCutMsg.value);
|
|
}
|
|
if (!props.auto) {
|
|
emit("update:modelValue", _files);
|
|
return;
|
|
}
|
|
commonUploadTransaction(_files);
|
|
}
|
|
};
|
|
|
|
const commonUploadTransaction = (_files: any[]) => {
|
|
let currentTimeStamp = new Date().valueOf();
|
|
let successText = uploadSuccess;
|
|
if (props.url) {
|
|
localUploadTransaction({
|
|
url: props.url,
|
|
files: _files,
|
|
});
|
|
} else {
|
|
emit("done", { currentTimeStamp, msg: successText, data: _files });
|
|
clearAllCutEffect();
|
|
}
|
|
};
|
|
|
|
const chooseFile = () => {
|
|
let _target = orgFileInput.value;
|
|
if (_target) {
|
|
_target.click();
|
|
}
|
|
};
|
|
|
|
const clickOrgInput = () => {
|
|
let currentTimeStamp = new Date().valueOf();
|
|
emit("choose", currentTimeStamp);
|
|
};
|
|
|
|
const dragRef = ref();
|
|
|
|
function dragEnter(e: any) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
|
|
function dragOver(e: any) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (dragRef.value) {
|
|
dragRef.value.addEventListener("dragenter", dragEnter, false);
|
|
dragRef.value.addEventListener("dragover", dragOver, false);
|
|
dragRef.value.addEventListener("drop", uploadChange, false);
|
|
}
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (dragRef.value) {
|
|
dragRef.value.removeEventListener("dragenter");
|
|
dragRef.value.removeEventListener("dragover");
|
|
dragRef.value.removeEventListener("drop");
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="layui-upload layui-upload-wrap"
|
|
:class="disabledPreview ? 'layui-upload-file-disabled' : ''"
|
|
>
|
|
<input
|
|
type="file"
|
|
class="layui-upload-file"
|
|
ref="orgFileInput"
|
|
:name="field"
|
|
:field="field"
|
|
:multiple="multiple"
|
|
:accept="acceptMime"
|
|
:disabled="disabled"
|
|
@click="clickOrgInput"
|
|
@change="uploadChange"
|
|
/>
|
|
<div v-if="!drag">
|
|
<div class="layui-upload-btn-box" @click.stop="chooseFile">
|
|
<template v-if="slot.default">
|
|
<slot :disabled="disabled"></slot>
|
|
</template>
|
|
<template v-else>
|
|
<lay-button type="primary" :disabled="disabled">{{
|
|
text
|
|
}}</lay-button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
ref="dragRef"
|
|
class="layui-upload-drag"
|
|
:class="
|
|
disabled
|
|
? 'layui-upload-drag-disable'
|
|
: isDragEnter
|
|
? 'layui-upload-drag-draging'
|
|
: ''
|
|
"
|
|
@click.stop="chooseFile"
|
|
>
|
|
<i class="layui-icon"></i>
|
|
<p>{{ dragText }}</p>
|
|
<div class="layui-hide" id="uploadDemoView">
|
|
<hr />
|
|
<img src="" alt="上传成功后渲染" style="max-width: 196px" />
|
|
</div>
|
|
</div>
|
|
<lay-layer
|
|
v-model="innerCutVisible"
|
|
:title="computedCutLayerOption.title"
|
|
:move="computedCutLayerOption.move"
|
|
:resize="computedCutLayerOption.resize"
|
|
:shade="computedCutLayerOption.shade"
|
|
:shadeClose="computedCutLayerOption.shadeClose"
|
|
:shadeOpacity="computedCutLayerOption.shadeOpacity"
|
|
:zIndex="computedCutLayerOption.zIndex"
|
|
:btnAlign="computedCutLayerOption.btnAlign"
|
|
:area="computedCutLayerOption.area"
|
|
:anim="computedCutLayerOption.anim"
|
|
:isOutAnim="computedCutLayerOption.isOutAnim"
|
|
:btn="computedCutLayerOption.btn"
|
|
@close="clearAllCutEffect"
|
|
>
|
|
<div
|
|
class="copper-container"
|
|
v-for="(base64str, index) in activeUploadFilesImgs"
|
|
:key="`file${index}`"
|
|
>
|
|
<img
|
|
:src="base64str"
|
|
:id="`_lay_upload_img${index}`"
|
|
class="_lay_upload_img"
|
|
/>
|
|
</div>
|
|
</lay-layer>
|
|
<div
|
|
class="layui-upload-list"
|
|
:class="disabledPreview ? 'layui-upload-list-disabled' : ''"
|
|
>
|
|
<slot name="preview"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|