基本使用

基本用法

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

标准头像上传

标准格式，头像最大为 3M

标准头像上传

标准样式，头像最大为 3M

<template>
  <div>
    <h3>标准头像上传</h3>
    <p>标准样式，头像最大为 3M</p>
    <SunlightImage
      v-model:imageUrl="imageUrl"
      :api="uploadApi"
      :width="'120px'"
      :height="'120px'"
      :fileSize="3"
      :fileType="['image/jpeg', 'image/png']"
    />
  </div>
</template>

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

const imageUrl = 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>
    <SunlightImage
      v-model:imageUrl="imageUrl"
      :api="uploadApi"
      :width="'120px'"
      :height="'120px'"
      :borderRadius="'50%'"
      :drag="false"
      :fileSize="3"
      :fileType="['image/jpeg', 'image/png']"
    />
  </div>
</template>

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

const imageUrl = 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>

隐藏源代码

上传 Banner 图

横幅组件（可裁剪上传）

上传 Banner 图

宽横幅组件（可拖拽上传）

<template>
  <div>
    <h3>上传 Banner 图</h3>
    <p>宽横幅组件（可拖拽上传）</p>
    <SunlightImage
      v-model:imageUrl="imageUrl"
      :api="uploadApi"
      :width="'400px'"
      :height="'200px'"
      :borderRadius="'8px'"
      :drag="true"
      :fileSize="5"
      :fileType="['image/jpeg', 'image/png']"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImage } from "sunlight-ui";
const imageUrl = 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/600/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

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

隐藏源代码

禁用状态

无图（需要上传）

禁用状态

无图（禁用上传）

<template>
  <div>
    <h3>禁用状态</h3>
    <p>无图（禁用上传）</p>
    <SunlightImage v-model:imageUrl="imageUrl" :api="uploadApi" :width="'120px'" :height="'120px'" :disabled="true" />
  </div>
</template>

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

const imageUrl = 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>
    <SunlightImage v-model:imageUrl="imageUrl" :api="uploadApi" :width="'120px'" :height="'120px'" :disabled="true" />
  </div>
</template>

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

const imageUrl = ref("https://picsum.photos/300/300?random=1");

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 class="demo-container">
    <h3>事件处理</h3>
    <SunlightImage
      v-model:imageUrl="eventImageUrl"
      :api="uploadApi"
      @upload-success="handleUploadSuccess"
      @upload-error="handleUploadError"
    />
    <div class="demo-info">
      <p>当前图片地址: {{ eventImageUrl || "未上传" }}</p>
      <p v-if="uploadMessage" class="upload-message">{{ uploadMessage }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImage } from "sunlight-ui";
const eventImageUrl = ref("");
const uploadMessage = ref("");

// 上传 API
const uploadApi = async formData => {
  try {
    // 使用指定的接口 `https://jsonplaceholder.typicode.com/posts/`
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });

    // 模拟返回图片URL，实际项目中根据接口返回格式调整
    const data = await response.json();
    return {
      data: {
        fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
      },
    };
  } catch (error) {
    throw error;
  }
};

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

const handleUploadError = (error, file) => {
  uploadMessage.value = "上传失败：" + error.message;
  setTimeout(() => {
    uploadMessage.value = "";
  }, 3000);
};
</script>

<style scoped>
.demo-container {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #ffffff;
}

.demo-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.upload-message {
  color: #67c23a;
  font-weight: 500;
  margin-top: 10px;
}

.upload-message.error {
  color: #f56c6c;
}
</style>

隐藏源代码

文档说明

SunlightImage Props 配置表

属性名	说明	类型	默认值
imageUrl	图片地址，支持 v-model 双向绑定	string	''
api	上传图片的 API 方法，必须传参	function	-
drag	是否支持拖拽上传	boolean	true
disabled	是否禁用上传组件	boolean	false
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:imageUrl	图片地址更新事件	string
upload-success	上传成功事件	response: any, file: any
upload-error	上传失败事件	error: any, 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 文档