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 { Recordable } from "../../types";
import { layer } from "@layui/layer-vue"; import { layer } from "@layui/layer-vue";
import { ref, useSlots, withDefaults, onMounted, defineExpose } from "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 //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 isDragEnter = ref(false);
const orgFileInput = templateRef<HTMLElement>('orgFileInput') const orgFileInput = templateRef<HTMLElement>("orgFileInput");
// 统一异常提示的常量 // 统一异常提示的常量
const defaultErrorMsg = "上传失败"; const defaultErrorMsg = "上传失败";
const urlErrorMsg = "上传地址格式不合法"; const urlErrorMsg = "上传地址格式不合法";
@ -78,7 +78,7 @@ const localUploadTransaction = (option: localUploadTransaction) => {
localUpload({ url, formData }, function () { localUpload({ url, formData }, function () {
clearTimeout(utimer); clearTimeout(utimer);
}); });
},200) }, 200);
} }
}; };
@ -89,7 +89,7 @@ interface localUploadOption {
} }
const errorF = (errorText: string) => { const errorF = (errorText: string) => {
let currentTimeStamp = (new Date()).valueOf(); let currentTimeStamp = new Date().valueOf();
let errorMsg = errorText ? errorText : defaultErrorMsg; let errorMsg = errorText ? errorText : defaultErrorMsg;
errorMsg = `layui-vue:${errorMsg}`; errorMsg = `layui-vue:${errorMsg}`;
console.warn(errorMsg); console.warn(errorMsg);
@ -108,9 +108,12 @@ const localUpload = (option: localUploadOption,callback:Function) => {
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) { 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; let successText = xhr.responseText ? xhr.responseText : uploadSuccess;
emit("before",Object.assign({currentTimeStamp,msg:successText,...option})); emit(
"before",
Object.assign({ currentTimeStamp, msg: successText, ...option })
);
} else { } else {
errorF(xhr.responseText); errorF(xhr.responseText);
} }
@ -128,7 +131,7 @@ const localUpload = (option: localUploadOption,callback:Function) => {
xhr.setRequestHeader("Accept", "application/json, text/javascript"); xhr.setRequestHeader("Accept", "application/json, text/javascript");
} }
// 上传事务开启前的回调 // 上传事务开启前的回调
let currentTimeStamp = (new Date()).valueOf(); let currentTimeStamp = new Date().valueOf();
emit("before", Object.assign(option, currentTimeStamp)); emit("before", Object.assign(option, currentTimeStamp));
xhr.send(formData); xhr.send(formData);
if (cb && typeof cb == "function") { if (cb && typeof cb == "function") {
@ -157,7 +160,9 @@ const getUploadChange = (e: any) => {
if (_cache && _cache.length > 0) { if (_cache && _cache.length > 0) {
for (let i = 0; i < _cache.length; i++) { for (let i = 0; i < _cache.length; i++) {
let _sizeErrorFile = _cache[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); errorF(errorMsg);
} }
} }
@ -182,7 +187,7 @@ const chooseFile =()=>{
// _target?.onclick(); // _target?.onclick();
}; };
const clickOrgInput = () => { const clickOrgInput = () => {
let currentTimeStamp = (new Date()).valueOf(); let currentTimeStamp = new Date().valueOf();
//console.log(currentTimeStamp); //console.log(currentTimeStamp);
emit("choose", currentTimeStamp); emit("choose", currentTimeStamp);
}; };
@ -215,7 +220,9 @@ const uploadDragLeave = (e: any) => {
/> />
<div v-if="!drag"> <div v-if="!drag">
<div class="layui-upload-btn-box"> <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> </div>
<div <div