upload project source code
This commit is contained in:
256
后端源码/yifan.action-ai.cn/index/js/SingleImageUpload.CngBsWfh.js
Normal file
256
后端源码/yifan.action-ai.cn/index/js/SingleImageUpload.CngBsWfh.js
Normal file
@@ -0,0 +1,256 @@
|
||||
import { a1 as ElUpload, E as ElMessage, R as ElImage, i as ElIcon } from "./element-plus.CkEW9frc.js";
|
||||
import { J as defineComponent, ey as useCssVars, ev as useModel, m as watch, aO as resolveComponent, S as openBlock, _ as createElementBlock, $ as createVNode, a0 as withCtx, H as Fragment, T as createBlock, aw as withModifiers, a8 as createCommentVNode, aa as toDisplayString, ez as mergeModels, r as ref } from "./.pnpm.BW3P1y8f.js";
|
||||
import { P as ParamsAPI } from "./index.CMd5bD1r.js";
|
||||
import { _ as _export_sfc } from "./_plugin-vue_export-helper.1tPrXgE0.js";
|
||||
const _hoisted_1 = { class: "single-image-upload" };
|
||||
const _hoisted_2 = {
|
||||
key: 0,
|
||||
class: "el-upload__tip"
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "SingleImageUpload",
|
||||
props: /* @__PURE__ */ mergeModels({
|
||||
/**
|
||||
* 请求携带的额外参数
|
||||
*/
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 上传文件的参数名
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: "file"
|
||||
},
|
||||
/**
|
||||
* 最大文件大小（单位：M）
|
||||
*/
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
/**
|
||||
* 上传图片格式，默认支持所有图片(image/*)，指定格式示例：'.png,.jpg,.jpeg,.gif,.bmp'
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "image/*"
|
||||
},
|
||||
/**
|
||||
* 自定义样式，用于设置组件的宽度和高度等其他样式
|
||||
*/
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: "150px",
|
||||
height: "150px"
|
||||
};
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 是否显示提示信息
|
||||
*/
|
||||
showTip: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 提示文本
|
||||
*/
|
||||
tipText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 是否启用图片预览功能
|
||||
*/
|
||||
enablePreview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}, {
|
||||
"modelValue": {
|
||||
default: ""
|
||||
},
|
||||
"modelModifiers": {}
|
||||
}),
|
||||
emits: /* @__PURE__ */ mergeModels(["success", "error", "input", "update:modelValue"], ["update:modelValue"]),
|
||||
setup(__props, { emit: __emit }) {
|
||||
useCssVars((_ctx) => ({
|
||||
"v4b209376": props.style.width ?? "150px",
|
||||
"b464b91e": props.style.height ?? "150px"
|
||||
}));
|
||||
const props = __props;
|
||||
const modelValue = useModel(__props, "modelValue");
|
||||
const internalFileList = ref([]);
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
internalFileList.value = [
|
||||
{
|
||||
name: newVal.split("/").pop() || "image",
|
||||
url: newVal
|
||||
}
|
||||
];
|
||||
} else {
|
||||
internalFileList.value = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
watch(
|
||||
() => internalFileList.value,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.length > 0 && newVal[0].url) {
|
||||
modelValue.value = newVal[0].url;
|
||||
} else {
|
||||
modelValue.value = "";
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const emit = __emit;
|
||||
function handleBeforeUpload(file) {
|
||||
const acceptTypes = props.accept.split(",").map((type) => type.trim());
|
||||
const isValidType = acceptTypes.some((type) => {
|
||||
if (type === "image/*") {
|
||||
return file.type.startsWith("image/");
|
||||
} else if (type.startsWith(".")) {
|
||||
return file.name.toLowerCase().endsWith(type);
|
||||
} else {
|
||||
return file.type === type;
|
||||
}
|
||||
});
|
||||
if (!isValidType) {
|
||||
ElMessage.warning(`上传文件的格式不正确，仅支持：${props.accept}`);
|
||||
return false;
|
||||
}
|
||||
if (file.size > props.maxFileSize * 1024 * 1024) {
|
||||
ElMessage.warning(`上传图片不能大于 ${props.maxFileSize}MB`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
async function handleUpload(options) {
|
||||
try {
|
||||
const file = options.file;
|
||||
const formData = new FormData();
|
||||
formData.append(props.name, file);
|
||||
for (const [key, value] of Object.entries(props.data)) {
|
||||
formData.append(key, String(value));
|
||||
}
|
||||
const response = await ParamsAPI.uploadFile(formData);
|
||||
if (response.data.code === 0 && response.data) {
|
||||
const fileInfo = response.data.data;
|
||||
onSuccess(fileInfo);
|
||||
return fileInfo;
|
||||
} else {
|
||||
const errorMsg = response.data.msg || "上传失败";
|
||||
ElMessage.error(errorMsg);
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
} catch (error) {
|
||||
onError(error instanceof Error ? error : new Error(String(error)));
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
function handleDelete() {
|
||||
internalFileList.value = [];
|
||||
}
|
||||
function handleImageClick(event) {
|
||||
event.stopPropagation();
|
||||
if (props.enablePreview && internalFileList.value && internalFileList.value.length > 0 && internalFileList.value[0].url) ;
|
||||
}
|
||||
const onSuccess = (fileInfo) => {
|
||||
const newFileList = [
|
||||
{
|
||||
name: fileInfo.file_name,
|
||||
url: fileInfo.file_url
|
||||
}
|
||||
];
|
||||
internalFileList.value = newFileList;
|
||||
emit("success", fileInfo);
|
||||
emit("input", fileInfo.file_url);
|
||||
emit("update:modelValue", fileInfo.file_url);
|
||||
};
|
||||
const onError = (error) => {
|
||||
console.error("图片上传失败:", error);
|
||||
ElMessage.error("图片上传失败，请重试");
|
||||
emit("error", error);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_el_image = ElImage;
|
||||
const _component_CircleCloseFilled = resolveComponent("CircleCloseFilled");
|
||||
const _component_el_icon = ElIcon;
|
||||
const _component_Plus = resolveComponent("Plus");
|
||||
const _component_el_upload = ElUpload;
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createVNode(_component_el_upload, {
|
||||
"file-list": internalFileList.value,
|
||||
"onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => internalFileList.value = $event),
|
||||
class: "single-upload",
|
||||
"list-type": "picture-card",
|
||||
"show-file-list": false,
|
||||
accept: props.accept,
|
||||
"before-upload": handleBeforeUpload,
|
||||
"http-request": handleUpload,
|
||||
"on-success": onSuccess,
|
||||
"on-error": onError,
|
||||
"on-remove": handleDelete,
|
||||
disabled: props.disabled
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
internalFileList.value && internalFileList.value.length > 0 && internalFileList.value[0].url ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
||||
(openBlock(), createBlock(_component_el_image, {
|
||||
key: internalFileList.value[0].url,
|
||||
class: "single-upload__image",
|
||||
src: internalFileList.value[0].url,
|
||||
fit: "cover",
|
||||
"preview-src-list": props.enablePreview ? [internalFileList.value[0].url] : [],
|
||||
"preview-teleported": true,
|
||||
onClick: withModifiers(handleImageClick, ["stop"])
|
||||
}, null, 8, ["src", "preview-src-list"])),
|
||||
!props.disabled ? (openBlock(), createBlock(_component_el_icon, {
|
||||
key: 0,
|
||||
class: "single-upload__delete-btn",
|
||||
onClick: withModifiers(handleDelete, ["stop"])
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createVNode(_component_CircleCloseFilled)
|
||||
]),
|
||||
_: 1
|
||||
})) : createCommentVNode("", true)
|
||||
], 64)) : (openBlock(), createBlock(_component_el_icon, {
|
||||
key: 1,
|
||||
class: "single-upload__add-btn"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createVNode(_component_Plus)
|
||||
]),
|
||||
_: 1
|
||||
}))
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["file-list", "accept", "disabled"]),
|
||||
props.showTip ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(props.tipText || `支持 ${props.accept} 格式，文件大小不超过 ${props.maxFileSize}MB`), 1)) : createCommentVNode("", true)
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const SingleImageUpload = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d3fd4602"]]);
|
||||
export {
|
||||
SingleImageUpload as S
|
||||
};
|
||||
Reference in New Issue
Block a user