文件上传

导入上传图片组件

import ImageUpload from "@/components/Upload/ImageUpload.vue";

组件参数

名称	类型	默认值	描述
v-model	Arrays	[]	已经上传的图片数组
action	String	FileAPI.uploadUrl	文件上传地址
headers	Object	{Authorization: localStorage.getItem(TOKEN_KEY),}	提示文本类型
data	Object	{}	请求携带的额外参数
name	String	file	上传文件的参数名
limit	Number	10	上传最大的图片数量
show-del-btn	Boolean	true	是否显示删除按钮
show-upload-btn	Boolean	true	是否显示上传按钮
upload-max-size	Number	210241024	单个图片上传大小限制(单位 byte)
accept	String	image*	上传文件类型

使用组件

const picUrls = ref([
  "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
  "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
  "https://s2.loli.net/2023/05/24/ZPiGbcpR91WqInB.jpg",
  "https://s2.loli.net/2023/05/24/e1bcnEq3MFdmlNL.jpg",
  "https://s2.loli.net/2023/05/24/wZTSPj1yDQNcuhU.jpg",
]);
<image-upload v-model="picUrls" />

导入上传文件组件

import FileUpload from "@/components/Upload/FileUpload.vue";

组件参数

名称	类型	默认值	描述
v-model	Arrays	[]	已经上传的文件数组
action	String	FileAPI.uploadUrl	文件上传地址
headers	Object	{Authorization: localStorage.getItem(TOKEN_KEY),}	提示文本类型
data	Object	{}	请求携带的额外参数
accept	String	*	上传文件类型
name	String	file	上传文件的参数名
limit	Number	10	上传最大的文件数量
show-del-btn	Boolean	true	是否显示删除按钮
show-upload-btn	Boolean	true	是否显示上传按钮
upload-max-size	Number	2 * 1024*1024	单个图片上传大小限制(单位 byte)
upload-btn-text	String	上传文件	上传按钮文本
show-tip	Boolean	false	是否显示提示
tip	String	""	提示文本
style	String	{width:'300px'}	上传组件的样式

使用组件

const fileUrls = ref([
  {
    name: "file one.jpg",
    url: "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
  },
  {
    name: "file two.jpg",
    url: "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
  },
]);
<file-upload v-model="fileUrls" />

示例源码