1.8.42 • Published 3 years ago

lemon-upload v1.8.42

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

基于AntDesign vue的自定义文件上传

基于script setup 语法糖

所需参数大致如下,

详细可见 https://blog.csdn.net/qianqianNingmeng/article/details/126153710

const props = defineProps({\ // 是否支持一次性选多个文件\ multipleType: {\ type: Boolean, // 参数类型\ default: false, //默认值\ required: false, //是否必传\ },\ // 上传文件接口接受的参数名称\ uploadName: {\ required: true,\ default: 'file', //默认值\ },\ // 传递进来的字典值\ value: {\ required: true,\ },\ // 是不是接受何种文件类型\ // true - 时接受各种文件 此时就算传了acceptType 也会忽略\ // false 则以acceptType为准\ isTypeAll: {\ type: Boolean,\ default: true,\ },\ // 上传文件选中的类型 默认全部类型文件\ // 接受格式字符串多种格式,隔开 例如:'doc,docx'\ acceptType: {\ type: String,\ default: "",\ },\ // 文件列表\ showFileListArr: {\ type: Array,\ default: () => {\ return [];\ },\ },\ // 允许上传最大文件数目-默认1000 即不限数量\ maxLength: {\ type: Number,\ default: 1000,\ },\ // 上传url\ FileUploadUrl: {\ type: String,\ default: "/",\ }, // 上传是否携带headers信息\ headers: {\ type: Object,\ default: () => {\ return "";\ },\ },\ // 上传是否携带data\ uplaodData: {\ type: Object,\ default: () => {\ return { secretFlag: "N" };\ },\ },\ });\

组件所含file参数会有一定的格式,上传接口返回的数据会存在response中保持一定格式,如果showFileListArr有值,组件会初始化相关格式数据,包括response字段,例如初始化response.data.fileId;

所以 为了能够成功回显 showFileListArr 文件回显数组一定要含有name(文件名称) fileType(文件类型) 字段

fileType(string 类型) 1:图片/2:视频/3:其他

图片 视频类型可预览-所以 保证 thumbUrl 该字段,这是图片预览 视频播放下载的的地址url

showFileListArr示例(必要字段):

const showFileArr = ref(\ {\ fileId: "1553929283028746241",\ name: "1656904733449.png",\ fileType: "1",\ thumbUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662187484&t=ea7133f11704974e888254dad6ad3cd3'\ },\ {\ fileId: "1553929314720907266",\ name: "员工绩效管理办法V1.0.docx",\ fileType: "3",\ },\ {\ fileId: "1553930518096084993",\ name: "movie.mp4",\ fileType: "2",\ thumbUrl:'https://www.runoob.com/try/demo_source/movie.mp4'\ },\ );\