38 lines
4.0 KiB
JavaScript
38 lines
4.0 KiB
JavaScript
import{a1 as e,ao as a,i as t,E as l,R as s}from"./element-plus.sfqR2v8u.js";import{J as i,ey as r,ev as o,m as n,aO as u,S as p,_ as d,$ as c,a0 as m,H as f,T as v,aw as g,a8 as y,a6 as h,aa as _,ez as w,r as b}from"./.pnpm.BudmgPu7.js";import{P as x}from"./index.BY9tP75-.js";import{_ as S}from"./_plugin-vue_export-helper.BCo6x5W8.js";const j={class:"single-image-upload"},k={key:1,"element-loading-text":"图片上传中...",style:{width:"100%",height:"100%",display:"flex","align-items":"center","justify-content":"center"}},F={key:0,class:"el-upload__tip"},z=S(i({__name:"SingleImageUpload",props:w({
|
||
/**
|
||
* 请求携带的额外参数
|
||
*/
|
||
data:{type:Object,default:()=>({})},
|
||
/**
|
||
* 上传文件的参数名
|
||
*/
|
||
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:()=>({width:"150px",height:"150px"})},
|
||
/**
|
||
* 是否禁用
|
||
*/
|
||
disabled:{type:Boolean,default:!1},
|
||
/**
|
||
* 是否显示提示信息
|
||
*/
|
||
showTip:{type:Boolean,default:!1},
|
||
/**
|
||
* 提示文本
|
||
*/
|
||
tipText:{type:String,default:""},
|
||
/**
|
||
* 是否启用图片预览功能
|
||
*/
|
||
enablePreview:{type:Boolean,default:!0}},{modelValue:{default:""},modelModifiers:{}}),emits:w(["success","error","input","update:modelValue"],["update:modelValue"]),setup(i,{emit:w}){r(e=>({v3b21199c:S.style.width??"150px",v0f4a8996:S.style.height??"150px"}));const S=i,z=o(i,"modelValue"),P=b([]),B=b(!1);n(()=>z.value,e=>{P.value=e?[{name:e.split("/").pop()||"image",url:e}]:[]},{immediate:!0}),n(()=>P.value,e=>{e&&e.length>0&&e[0].url?z.value=e[0].url:z.value=""},{deep:!0});const C=w;function T(e){return S.accept.split(",").map(e=>e.trim()).some(a=>"image/*"===a?e.type.startsWith("image/"):a.startsWith(".")?e.name.toLowerCase().endsWith(a):e.type===a)?!(e.size>1024*S.maxFileSize*1024)||(l.warning(`上传图片不能大于 ${S.maxFileSize}MB`),!1):(l.warning(`上传文件的格式不正确，仅支持：${S.accept}`),!1)}async function V(e){try{B.value=!0;const a=e.file,t=new FormData;t.append(S.name,a);for(const[e,l]of Object.entries(S.data))t.append(e,String(l));const s=await x.uploadFile(t);if(0===s.data.code&&s.data){const e=s.data.data;return O(e),e}{const e=s.data.msg||"上传失败";throw l.error(e),new Error(e)}}catch(a){throw M(a instanceof Error?a:new Error(String(a))),a}finally{B.value=!1}}function $(){P.value=[]}function E(e){e.stopPropagation(),S.enablePreview&&P.value&&P.value.length>0&&P.value[0].url}const O=e=>{const a=[{name:e.file_name,url:e.file_url}];P.value=a,C("success",e),C("input",e.file_url),C("update:modelValue",e.file_url)},M=e=>{l.error("图片上传失败，请重试"),C("error",e)};return(l,i)=>{const r=s,o=u("CircleCloseFilled"),n=t,w=u("Plus"),b=e,x=a;return p(),d("div",j,[c(b,{"file-list":P.value,"onUpdate:fileList":i[0]||(i[0]=e=>P.value=e),class:"single-upload","list-type":"picture-card","show-file-list":!1,accept:S.accept,"before-upload":T,"http-request":V,"on-success":O,"on-error":M,"on-remove":$,disabled:S.disabled},{default:m(()=>[P.value&&P.value.length>0&&P.value[0].url?(p(),d(f,{key:0},[(p(),v(r,{key:P.value[0].url,class:"single-upload__image",src:P.value[0].url,fit:"cover","preview-src-list":S.enablePreview?[P.value[0].url]:[],"preview-teleported":!0,onClick:g(E,["stop"])},null,8,["src","preview-src-list"])),S.disabled?y("",!0):(p(),v(n,{key:0,class:"single-upload__delete-btn",onClick:g($,["stop"])},{default:m(()=>[c(o)]),_:1}))],64)):h((p(),d("div",k,[c(n,{class:"single-upload__add-btn"},{default:m(()=>[c(w)]),_:1})])),[[x,B.value]])]),_:1},8,["file-list","accept","disabled"]),S.showTip?(p(),d("div",F,_(S.tipText||`支持 ${S.accept} 格式，文件大小不超过 ${S.maxFileSize}MB`),1)):y("",!0)])}}}),[["__scopeId","data-v-e9429a1d"]]);export{z as S};
|