该按钮关联着 handleImport 的方法，当触发点击事件之之后，弹出对话框：

const excelOpen = ref(false);

function handleImport(){

excelOpen.value = true;

}

        2）对话框的内容：

        根据 Element 官网参考实现文件上传功能：Upload 上传 | Element Plus

         在对话框中插入文件上传的功能：

        使用了 el-dialog 组件来创建一个对话框，用于导入数据。对话框内嵌了一个 el-upload 组件，用于文件上传。

<code><!-- 导入按钮-->

<el-col :span="1.5">code>

<el-button type="warning" plain icon="Upload" @click="handleExcelImport" v-hasPermi="['manage:sku:add']">导入</el-button>code>

</el-col>

<!-- 数据导入对话框 -->

<el-dialog title="数据导入" v-model="excelOpen" width="400px" append-to-body>code>

<el-upload ref="uploadRef" class="upload-demo"code>

:action="uploadExcelUrl"code>

:headers="headers"code>

:on-success="handleUploadSuccess"code>

:on-error="handleUploadError"code>

:before-upload="handleBeforeUpload" code>

:limit="1"code>

:auto-upload="false">code>

<template #trigger>

<el-button type="primary">上传文件</el-button>code>

</template>

<el-button class="ml-3" type="success" @click="submitUpload">code>

上传

</el-button>

<template #tip>

<div class="el-upload__tip">code>

上传文件仅支持，xls/xlsx格式，文件大小不得超过1M

</div>

</template>

</el-upload>

</el-dialog>

<script setup name="Sku">code>

import { getToken } from "@/utils/auth";

/* 打开数据导入对话框 */

const excelOpen = ref(false);

function handleExcelImport() {

excelOpen.value = true;

}

/* 上传地址 */

const uploadExcelUrl = ref(import.meta.env.VITE_APP_BASE_API + "/manage/sku/import"); // 上传excel文件地址

/* 上传请求头 */

const headers = ref({ Authorization: "Bearer " + getToken() });

/* 上传excel */

const uploadRef = ref({});

function submitUpload() {

uploadRef.value.submit()

}

const props = defineProps({

modelValue: [String, Object, Array],

// 大小限制(MB)

fileSize: {

type: Number,

default: 1,

},

// 文件类型, 例如["xls", "xlsx"]

fileType: {

type: Array,

default: () => ["xls", "xlsx"],

},

});

// 上传前loading加载

function handleBeforeUpload(file) {

let isExcel = false;

if (props.fileType.length) {

let fileExtension = "";

if (file.name.lastIndexOf(".") > -1) {

fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);

}

isExcel = props.fileType.some(type => {

if (file.type.indexOf(type) > -1) return true;

if (fileExtension && fileExtension.indexOf(type) > -1) return true;

return false;

});

}

if (!isExcel) {

proxy.$modal.msgError(

`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`

);

return false;

}

if (props.fileSize) {

const isLt = file.size / 1024 / 1024 < props.fileSize;

if (!isLt) {

proxy.$modal.msgError(`上传excel大小不能超过 ${props.fileSize} MB!`);

return false;

}

}

proxy.$modal.loading("正在上传excel，请稍候...");

}

// 上传失败

function handleUploadError() {

proxy.$modal.msgError("上传excel失败");

uploadRef.value.clearFiles();

proxy.$modal.closeLoading();

}

// 上传成功回调

function handleUploadSuccess(res, file) {

if (res.code === 200) {

proxy.$modal.msgSuccess("上传excel成功");

excelOpen.value = false;

getList();

}else{

proxy.$modal.msgError("res.msg");

}

uploadRef.value.clearFiles();

proxy.$modal.closeLoading();

}

</script>

<code>package com.dkd.manage.domain;

import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;

import com.alibaba.excel.annotation.ExcelProperty;

import com.alibaba.excel.annotation.write.style.ColumnWidth;

import com.alibaba.excel.annotation.write.style.HeadFontStyle;

import com.alibaba.excel.annotation.write.style.HeadRowHeight;

import com.dkd.common.annotation.Excel;

import com.dkd.common.core.domain.BaseEntity;

import org.apache.commons.lang3.builder.ToStringBuilder;

import org.apache.commons.lang3.builder.ToStringStyle;

/**

* 商品管理对象 tb_sku

*

* @author itheima

* @date 2024-07-15

*/

@ExcelIgnoreUnannotated// 注解表示在导出Excel时，忽略没有被任何注解标记的字段

@ColumnWidth(16)// 注解用于设置列的宽度

@HeadRowHeight(14)// 注解用于设置表头行的高度

@HeadFontStyle(fontHeightInPoints = 11)// 注解用于设置表头的字体样式

public class Sku extends BaseEntity

{

private static final long serialVersionUID = 1L;

/** 主键 */

private Long skuId;

/** 商品名称 */

@Excel(name = "商品名称")

@ExcelProperty("商品名称")

private String skuName;

/** 商品图片 */

@Excel(name = "商品图片")

@ExcelProperty("商品图片")

private String skuImage;

/** 品牌 */

@Excel(name = "品牌")

@ExcelProperty("品牌")

private String brandName;

/** 规格(净含量) */

@Excel(name = "规格(净含量)")

@ExcelProperty("规格(净含量)")

private String unit;

/** 商品价格 */

@Excel(name = "商品价格")

@ExcelProperty("商品价格")

private Long price;

/** 商品类型Id */

@Excel(name = "商品类型Id")

@ExcelProperty("商品类型Id")

private Long classId;

/** 是否打折促销 */

private Integer isDiscount;

// 其他略...

}

        完成之后，就可以使用了，通过创建 ExcelUtil 对象，调用 importEasyExcel() 方法实现导入功能，调用 exportEasyExcel() 方法实现导出功能。

举个例子：

导出结果：

        2.0 阿里云 OSS 概述

        阿里云对象存储 OSS（Object Storage Service），是一款海量、安全、低成本、高可靠的云存储服务。使用 OSS，您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种文件。

        使用了阿里云 OSS 对象存储服务之后，我们的项目当中如果涉及到文件上传这样的业务，在前端进行文件上传并请求到服务端时，在服务器本地磁盘当中就不需要再来存储文件了。我们直接将接收到的文件上传到 oss，由 oss 帮我们存储和管理，同时阿里云的 oss 存储服务还保障了我们所存储内容的安全可靠。

        2.1 使用阿里云 OSS 具体过程

        1）注册阿里云账户（注册完成后需要实名认证）

        2）注册完账号之后，就可以登录阿里云

        3）通过控制台找到对象存储 OSS 服务

        4）如果是第一次访问，还需要开通对象存储服务 OSS

        5）开通 OSS 服务之后，就可以进入到阿里云对象存储的控制台

        6）点击左侧的 "Bucket列表"，创建一个Bucket

        7）点击 "AccessKey管理"，进入到管理页面

        8）以管理员身份打开CMD命令行，执行如下命令，配置系统的环境变量

<code>set OSS_ACCESS_KEY_ID=LTAI5tXXXXXXXXXXXXXXXXXXXXM8TP

set OSS_ACCESS_KEY_SECRET=UzMcJXXXXXXXXXXXXXXXXXXXXdabTNafi

        将上述的ACCESS_KEY_ID 与 ACCESS_KEY_SECRET 的值一定要替换成自己的 。

        执行如下命令，让更改生效：

setx OSS_ACCESS_KEY_ID "%OSS_ACCESS_KEY_ID%"

setx OSS_ACCESS_KEY_SECRET "%OSS_ACCESS_KEY_SECRET%"

         执行如下命令，验证环境变量是否生效：

echo %OSS_ACCESS_KEY_ID%

echo %OSS_ACCESS_KEY_SECRET%

        阿里云oss 对象存储服务的准备工作我们已经完成了，接下来我们就来完成第二步操作：参照官方所提供的sdk示例来编写入门程序。

        1）首先我们需要来打开阿里云OSS的官方文档，在官方文档中找到 SDK 的示例代码：

        2）文档阅读：

        3）参照官方提供的SDK，改造一下，即可实现文件上传功能：

<code>package com.dkd.common.test;

import com.aliyun.oss.ClientException;

import com.aliyun.oss.OSS;

import com.aliyun.oss.common.auth.*;

import com.aliyun.oss.OSSClientBuilder;

import com.aliyun.oss.OSSException;

import com.aliyun.oss.model.PutObjectRequest;

import com.aliyun.oss.model.PutObjectResult;

import java.io.FileInputStream;

import java.io.InputStream;

public class Demo {

public static void main(String[] args) throws Exception {

// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。

String endpoint = "https://oss-cn-beijing.aliyuncs.com";

// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。

EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();

// 填写Bucket名称，例如examplebucket。

String bucketName = "dkd-itheima";

// 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。

String objectName = "gao.png";

// 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。

// 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。

String filePath= "E:\\temp\\upload\\gao.png";

// 创建OSSClient实例。

OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);

try {

InputStream inputStream = new FileInputStream(filePath);

// 创建PutObjectRequest对象。

PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, inputStream);

// 创建PutObject请求。

PutObjectResult result = ossClient.putObject(putObjectRequest);

} catch (OSSException oe) {

System.out.println("Caught an OSSException, which means your request made it to OSS, "

+ "but was rejected with an error response for some reason.");

System.out.println("Error Message:" + oe.getErrorMessage());

System.out.println("Error Code:" + oe.getErrorCode());

System.out.println("Request ID:" + oe.getRequestId());

System.out.println("Host ID:" + oe.getHostId());

} catch (ClientException ce) {

System.out.println("Caught an ClientException, which means the client encountered "

+ "a serious internal problem while trying to communicate with OSS, "

+ "such as not being able to access the network.");

System.out.println("Error Message:" + ce.getMessage());

} finally {

if (ossClient != null) {

ossClient.shutdown();

}

}

}

}

在以上代码中，需要替换的内容为：

        - endpoint：阿里云OSS中的bucket对应的域名

        - bucketName：Bucket名称

        - objectName：对象名称，在Bucket中存储的对象的名称

        - filePath：文件路径

运行以上程序后，会把本地的文件上传到阿里云OSS服务器上。

        2.2 将 X-File-Storage 集成到若依框架中

        相比直接使用阿里云 OSS，使用 X-File-Storage 上传图片到云服务器的操作会更加容易，使用 X-File-Storage 可以简化图片上传到云服务器的过程，特别是对于那些不熟悉阿里云 OSS API 或者希望减少开发工作量的开发者来说。X-File-Storage 是一个抽象层，它封装了底层存储服务的复杂性，提供了更简单、更统一的接口。 

将 X-File-Storage 集成到若依框架中的步骤：

        1）在 dkd-common 的 pom.xml 中引入依赖：

<!-- 文件上传-->

<dependency>

<groupId>org.dromara.x-file-storage</groupId>

<artifactId>x-file-storage-spring</artifactId>

<version>2.1.0</version>

</dependency>

<!-- 阿里云oss-->

<dependency>

<groupId>com.aliyun.oss</groupId>

<artifactId>aliyun-sdk-oss</artifactId>

<version>3.16.1</version>

</dependency>

        2）在 dkd-admin 的 application.yml 配置文件中先添加以下基础配置，再添加对应平台的配置：

# 文件上传

dromara:

x-file-storage: #文件存储配置

default-platform: aliyun-oss-1 #默认使用的存储平台

thumbnail-suffix: ".min.jpg" #缩略图后缀，例如【.min.jpg】【.png】

#对应平台的配置写在这里，注意缩进要对齐

aliyun-oss:

- platform: aliyun-oss-1 # 存储平台标识

enable-storage: true # 启用存储

access-key: ??

secret-key: ??

end-point: oss-cn-qingdao.aliyuncs.com

bucket-name: itheima-007

domain: https://itheima-007.oss-cn-qingdao.aliyuncs.com/ # 访问域名，注意“/”结尾，例如：https://abc.oss-cn-shanghai.aliyuncs.com/

base-path: dkd-images/ # 基础路径

        3）在 dkd-admin 的启动类上加上 @EnableFileStorage 注解：

@EnableFileStorage

@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class })

public class DkdApplication

{

public static void main(String[] args)

{

// System.setProperty("spring.devtools.restart.enabled", "false");

SpringApplication.run(DkdApplication.class, args);

System.out.println("(♥◠‿◠)ﾉﾞ 帝可得启动成功 ლ(´ڡ`ლ)ﾞ");

}

}

        4）修改若依默认上传图片代码

        找到 ruoyi-admin 模块中的 com.ruoyi.web.controller.common.CommonController 类，修改单个文件上传的方法：

@Autowired

private FileStorageService fileStorageService;//注入实列

/**

* 通用上传请求（单个）

*/

@PostMapping("/upload")

public AjaxResult uploadFile(MultipartFile file) throws Exception {

try {

// 指定oss保存文件路径

String objectName = LocalDate.now().format(DateTimeFormatter.ofPattern("yyyy/MM/dd")) + "/";

// 上传图片，成功返回文件信息

FileInfo fileInfo = fileStorageService.of(file).setPath(objectName).upload();

// 设置返回结果

AjaxResult ajax = AjaxResult.success();

ajax.put("url", fileInfo.getUrl());

ajax.put("fileName", fileInfo.getUrl()); //注意：这里的值要改为url，前端访问的地址,需要文件的地址 而不是文件名称

ajax.put("newFileName", fileInfo.getUrl());

ajax.put("originalFilename", file.getOriginalFilename());

return ajax;

} catch (Exception e) {

return AjaxResult.error(e.getMessage());

}

}