基本使用

基本用法

SunlightImages 是基于 Element Plus 上传组件封装的多图上传组件，提供了更简洁的使用方式和丰富的配置选项。

标准图片上传

标准格式，默认最多上传 5 张

标准图片上传

标准样式，默认最多上传 5 张

<template>
  <div>
    <h3>标准图片上传</h3>
    <p>标准样式，默认最多上传 5 张</p>
    <SunlightImages v-model:fileList="fileList" :api="uploadApi" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";
const fileList = ref([]);

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

隐藏源代码

数量限制

限制最多上传 3 张图片

数量限制

限制最多上传 3 张图片

<template>
  <div>
    <h3>数量限制</h3>
    <p>限制最多上传 3 张图片</p>
    <SunlightImages v-model:fileList="fileList" :api="uploadApi" :limit="3" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";

const fileList = ref([]);

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

隐藏源代码

禁用状态

禁用上传功能

禁用状态

禁用上传功能

<template>
  <div>
    <h3>禁用状态</h3>
    <p>禁用上传功能</p>
    <SunlightImages v-model:fileList="fileList" :api="uploadApi" :disabled="true" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";

const fileList = ref([]);

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

隐藏源代码

事件处理

处理上传成功、失败和删除事件

事件处理

处理上传成功、失败和删除事件

<template>
  <div>
    <h3>事件处理</h3>
    <p>处理上传成功、失败和删除事件</p>
    <SunlightImages
      v-model:fileList="fileList"
      :api="uploadApi"
      @upload-success="handleUploadSuccess"
      @upload-error="handleUploadError"
      @remove="handleRemove"
    />
    <div v-if="message" class="message" :class="messageType">
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";

const fileList = ref([]);
const message = ref("");
const messageType = ref("");

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};

const handleUploadSuccess = (response, file) => {
  message.value = "上传成功！";
  messageType.value = "success";
  setTimeout(() => {
    message.value = "";
  }, 3000);
};

const handleUploadError = (error, file) => {
  message.value = "上传失败，请重试！";
  messageType.value = "error";
  setTimeout(() => {
    message.value = "";
  }, 3000);
};

const handleRemove = file => {
  message.value = "删除成功！";
  messageType.value = "info";
  setTimeout(() => {
    message.value = "";
  }, 3000);
};
</script>

<style scoped>
.message {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.success {
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
  color: #67c23a;
}

.error {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  color: #f56c6c;
}

.info {
  background-color: #ecf5ff;
  border: 1px solid #d9ecff;
  color: #409eff;
}
</style>

隐藏源代码

圆形组件

圆形组件，图片最大为 5M（需要裁剪上传）

圆形组件

圆形组件，图片最大为 5M（禁止拖拽上传）

<template>
  <div>
    <h3>圆形组件</h3>
    <p>圆形组件，图片最大为 5M（禁止拖拽上传）</p>
    <SunlightImages
      v-model:fileList="fileList"
      :api="uploadApi"
      :width="'120px'"
      :height="'120px'"
      :borderRadius="'50%'"
      :drag="false"
      :fileSize="5"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";

const fileList = ref([]);

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

隐藏源代码

长方形图片

长方形组件，图片最大为 5M（可裁剪上传）

长方形图片

长方形组件，图片最大为 5M（可拖拽上传）

<template>
  <div>
    <h3>长方形图片</h3>
    <p>长方形组件，图片最大为 5M（可拖拽上传）</p>
    <SunlightImages
      v-model:fileList="fileList"
      :api="uploadApi"
      :width="'200px'"
      :height="'120px'"
      :borderRadius="'8px'"
      :drag="true"
      :fileSize="5"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";

const fileList = ref([]);

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/400/240?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

隐藏源代码

方形图片

方形组件，图片最大为 5M（需要裁剪上传）

方形图片

方形组件，图片最大为 5M（禁止拖拽上传）

<template>
  <div>
    <h3>方形图片</h3>
    <p>方形组件，图片最大为 5M（禁止拖拽上传）</p>
    <SunlightImages
      v-model:fileList="fileList"
      :api="uploadApi"
      :width="'150px'"
      :height="'150px'"
      :borderRadius="'8px'"
      :drag="false"
      :fileSize="5"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImages } from "sunlight-ui";

const fileList = ref([]);

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

隐藏源代码

文档说明

SunlightImages Props 配置表

属性名	说明	类型	默认值
fileList	文件列表，支持 v-model 双向绑定	array	[]
api	上传图片的 API 方法，必须传参	function	-
drag	是否支持拖拽上传	boolean	true
disabled	是否禁用上传组件	boolean	false
limit	最大上传数量	number	5
multiple	是否支持多选上传	boolean	true
fileSize	图片大小限制（单位：M）	number	5
fileType	图片类型限制	array	['image/jpeg', 'image/png', 'image/gif']
height	组件高度	string	'150px'
width	组件宽度	string	'150px'
borderRadius	组件边框圆角	string	'8px'
wrapperStyle	边框和样式配置对象	object	{}

wrapperStyle 配置对象

属性名	说明	类型	默认值
borderColor	边框颜色	string	'#dcdfe6'
focusBorderColor	聚焦/悬停时边框颜色	string	'#409eff'
focusBoxShadow	聚焦/悬停时阴影	string	-
backgroundColor	背景颜色	string	-
boxShadow	阴影效果	string	-

事件说明

事件名	说明	参数类型
update:fileList	文件列表更新事件	array
upload-success	上传成功事件	response: any, file: any
upload-error	上传失败事件	error: any, file: any
remove	删除文件事件	file: any

插槽说明

插槽名	说明	作用域参数
empty	无图片时的默认内容	-
tip	提示信息	-

API 方法说明

上传 API 方法应返回一个 Promise，成功时返回包含 fileUrl 字段的对象：

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};

相关链接

• Element Plus Upload 文档