theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构upload组件

Browse Source
This commit is contained in:
lockingreal 2022-03-27 17:56:05 +08:00
parent 7d2fc5f1ce
commit 82d10e9f5c
1 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/component/upload/index.vue
View File

@ -8,7 +8,7 @@ import "./index.less";
import { Recordable } from "../../types";
import { layer } from "@layui/layer-vue";
import { ref, useSlots, withDefaults, onMounted, defineExpose } from "vue";
import { templateRef } from '@vueuse/core'
import { templateRef } from "@vueuse/core";
// 组件的参数字段类型
//https://www.layuiweb.com/doc/modules/upload.html#options
@ -39,7 +39,7 @@ const emit = defineEmits(["choose", "before", "done", "error"]);
// 内部变量
const isDragEnter = ref(false);
const orgFileInput = templateRef<HTMLElement>('orgFileInput')
const orgFileInput = templateRef<HTMLElement>("orgFileInput");
// 统一异常提示的常量
const defaultErrorMsg = "上传失败";
const urlErrorMsg = "上传地址格式不合法";
@ -78,7 +78,7 @@ const localUploadTransaction = (option: localUploadTransaction) => {
localUpload({ url, formData }, function () {
clearTimeout(utimer);
});
},200)
}, 200);
}
};
@ -89,7 +89,7 @@ interface localUploadOption {
}
const errorF = (errorText: string) => {
let currentTimeStamp = (new Date()).valueOf();
let currentTimeStamp = new Date().valueOf();
let errorMsg = errorText ? errorText : defaultErrorMsg;
errorMsg = `layui-vue:${errorMsg}`;
console.warn(errorMsg);
@ -108,9 +108,12 @@ const localUpload = (option: localUploadOption,callback:Function) => {
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
let currentTimeStamp = (new Date()).valueOf();
let currentTimeStamp = new Date().valueOf();
let successText = xhr.responseText ? xhr.responseText : uploadSuccess;
emit("before",Object.assign({currentTimeStamp,msg:successText,...option}));
emit(
"before",
Object.assign({ currentTimeStamp, msg: successText, ...option })
);
} else {
errorF(xhr.responseText);
}
@ -128,7 +131,7 @@ const localUpload = (option: localUploadOption,callback:Function) => {
xhr.setRequestHeader("Accept", "application/json, text/javascript");
}
// 上传事务开启前的回调
let currentTimeStamp = (new Date()).valueOf();
let currentTimeStamp = new Date().valueOf();
emit("before", Object.assign(option, currentTimeStamp));
xhr.send(formData);
if (cb && typeof cb == "function") {
@ -157,7 +160,9 @@ const getUploadChange = (e: any) => {
if (_cache && _cache.length > 0) {
for (let i = 0; i < _cache.length; i++) {
let _sizeErrorFile = _cache[i];
let errorMsg = `文件 ${_sizeErrorFile.name} ${sizeErrorMsg},文件最大不可超过${props.size*1000}kb`;
let errorMsg = `文件 ${
_sizeErrorFile.name
} ${sizeErrorMsg},文件最大不可超过${props.size * 1000}kb`;
errorF(errorMsg);
}
}
@ -182,7 +187,7 @@ const chooseFile =()=>{
// _target?.onclick();
};
const clickOrgInput = () => {
let currentTimeStamp = (new Date()).valueOf();
let currentTimeStamp = new Date().valueOf();
//console.log(currentTimeStamp);
emit("choose", currentTimeStamp);
};
@ -215,7 +220,9 @@ const uploadDragLeave = (e: any) => {
/>
<div v-if="!drag">
<div class="layui-upload-btn-box">
<lay-button type="primary" @click.stop="chooseFile">上传图片</lay-button>
<lay-button type="primary" @click.stop="chooseFile"
>上传图片</lay-button
>
</div>
</div>
<div