element-ui上传图片
我现在在做一个springboot +vue2 的项目，无法完成头像上传和excel导入导出功能，
该回答引用ChatGPT
对于头像上传，Element UI提供了el-upload组件，可以轻松地实现文件上传功能。具体实现步骤如下：
1.在Vue组件中引入el-upload组件。
<template>
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleUploadSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
imageUrl: '',
uploadUrl: '/upload/avatar'
}
},
methods: {
handleUploadSuccess(response) {
this.imageUrl = response.data.url
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
this.$message.error('只能上传jpg/png格式的图片')
return false
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过2MB')
return false
}
return true
}
}
}
</script>
2.在后端中添加接收文件的API。在Spring Boot中可以使用Spring MVC的MultipartFile类型来处理文件上传。
@PostMapping("/upload/avatar")
@ResponseBody
public JsonResult uploadAvatar(@RequestParam("file") MultipartFile file) {
// 处理上传的文件
String url = fileService.upload(file);
// 返回图片的url
return JsonResult.success().put("url", url);
}
对于Excel导入导出功能，可以使用Apache POI来实现。具体实现步骤如下：
1.添加依赖
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>5.1.0</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>5.1.0</version>
</dependency>
2.实现导出Excel功能
@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
// 创建工作簿
XSSFWorkbook workbook = new XSSFWorkbook();
// 创建工作表
XSSFSheet sheet = workbook.createSheet("Sheet1");
// 创建行和单元格
for (int rowNum = 0; rowNum < 10; rowNum++) {
XSSFRow row = sheet.createRow(rowNum);
for (int cellNum = 0; cellNum < 10; cellNum++) {
XSSFCell cell = row.createCell(cellNum);
cell.setCellValue("cell-" + cellNum + "-" + rowNum);
}
}
// 设置响应头
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment; filename=test.xlsx");
// 输出Excel文件
workbook.write(response.getOutputStream());
workbook.close();
}
3.实现导入Excel功能
@PostMapping("/import")
@ResponseBody
public JsonResult importExcel(@RequestParam("file") MultipartFile file) throws IOException {
// 创建工作簿
Workbook workbook = WorkbookFactory.create(file.getInputStream());
// 获取工作表
Sheet sheet = workbook.getSheetAt(0);
// 遍历行和单元格
for (Row row : sheet) {
for (Cell cell : row) {
System.out.print(cell.getStringCellValue() + "\t");
}
System.out.println();
}
// 关闭工作簿
workbook.close();
return JsonResult.success();
}
在上面的代码中，我们首先创建了一个Workbook对象，它可以代表一个Excel文件。然后我们使用文件上传的MultipartFile对象来创建工作簿，并通过getSheetAt(0)方法获取第一个工作表。接下来，我们使用for循环遍历每一行和每一个单元格，并通过getCellType()和getStringCellValue()方法获取单元格中的数据。最后，我们关闭工作簿并返回一个JsonResult对象表示导入成功
参考GPT和自己的思路：如果您正在使用Element-UI来实现上传图片的功能，可以按照以下步骤进行操作：
在你的Vue组件中引入Element-UI的上传组件：
<template>
<el-upload
class="avatar-uploader"
action="/your/upload/url"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
2 在data中定义需要用到的变量：
data() {
return {
imageUrl: '',
uploadUrl: ''
}
}
3 实现上传前的校验逻辑，比如图片大小、类型等：
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
4 实现上传成功后的回调函数，将上传后的图片地址保存到imageUrl变量中：
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
this.uploadUrl = res.data.url
}
5 在服务器端实现上传图片的接口，并在action属性中指定该接口的URL。
如果您需要在Vue项目中使用Element-UI实现Excel导入导出功能，可以按照以下步骤进行操作：
1 安装xlsx和file-saver依赖：
npm install xlsx file-saver --save
2 在你的Vue组件中引入xlsx和file-saver：
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
3 实现Excel文件的导出功能，以导出一个包含三列数据的Excel表格为例：
exportExcel() {
const headers = ['姓名', '年龄', '性别']
const data = [
['张三', 20, '男'],
['李四', 30, '女'],
['王五', 40, '男']
]
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
FileSaver.saveAs(excelBlob, 'example.xlsx')
}
4 实现Excel文件的导入功能：
import XLSX from 'xlsx';
handleFileChange(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'binary' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
console.log(json);
}
reader.readAsBinaryString(file);
}
在以上代码中，我们通过FileReader来读取Excel文件的二进制数据，并将其传递给XLSX.read函数进行解析。解析完成后，我们可以使用XLSX.utils.sheet_to_json将表格数据转换为JSON格式，并对其进行进一步处理。在这里，我们仅仅是简单地将JSON输出到控制台。如果需要将表格数据提交给服务器进行处理，可以将其传递给后端接口进行处理。
需要注意的是，以上代码仅为示例代码，实际使用时需要根据具体情况进行调整。比如，需要根据表格的具体格式来调整XLSX.utils.sheet_to_json函数的参数，以确保正确地将表格数据转换为JSON格式。
该回答引用GPTᴼᴾᴱᴺᴬᴵ
对于element-ui上传图片的问题，你可以按照以下步骤进行处理：
- 在前端页面中使用element-ui组件来实现图片上传功能。具体可以参考element-ui官网中的Upload组件使用说明，其中包括了如何实现文件上传，上传前的校验，上传进度条等内容。
- 在后端Spring Boot应用中，使用Spring MVC的注解@RequestMapping来接受上传文件的请求。你需要在Spring Boot应用中定义一个Controller，通过@RequestMapping注解来指定请求的URL路径和请求方式（例如POST），并使用@RequestParam注解来接收上传的文件。
- 在Controller中，你需要调用Spring框架提供的MultipartFile类来处理上传的文件，具体可以参考Spring官方文档中的文件上传处理部分。
- 将上传的文件保存到服务器中。你可以在Controller中编写代码，将上传的文件保存到本地磁盘上的指定目录中。
- 如果需要，你可以将上传的文件存储到数据库中。你可以在Controller中调用Spring框架提供的JdbcTemplate或者MyBatis框架提供的ORM接口，将文件内容存储到数据库中。
关于Excel导入导出的问题，你可以使用Apache POI库来处理Excel文件。具体可以参考Apache POI的官方文档和示例代码，其中包括了如何读取Excel文件、写入Excel文件、生成Excel模板等内容。在Spring Boot应用中，你可以将Excel文件导入到数据库中，或者将数据库中的数据导出为Excel文件。
同时，你也可以使用一些第三方组件来简化Excel导入导出的处理，例如EasyPOI、JExcelApi等。
直接上组件
直接上组件
直接上组件
<style lang="scss" scoped>
:deep(.el-button.el-button--small) {
width: 65px;
left: 50% !important;
margin-left: -32.5px !important;
}
.roshi-upload input[type="file"]{
height: 0;
width: 0;
position: relative;
top:-2000px;
left:-2000px;
visibility: hidden;
}
.roshi-uploadArea {
width: 400px;
}
.roshi-uploadArea .imageButton {
position: absolute;
left: 38px;
}
.roshi-uploadArea .imageButton.delete {
top: 40px;
left: 42px;
background-color: transparent;
color: #fff;
border-color: #fff;
}
.roshi-uploadArea .imageButton.again {
top: 84px;
margin-left: 0;
}
.roshi-uploadArea .imageButton.upload {
top: 100px;
}
.roshi-wechat-site-uploadArea .left{
position: relative;
}
.roshi-uploadArea .cover {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px;
}
.roshi-uploadArea .roshi-loading {
margin-top: 40px;
}
.roshi-uploadArea .left {
position: relative;
/* cursor: pointer; */
width: 150px;
height: 150px;
border: 1px solid #e4e9f2;
border-radius: 4px;
background-color: #f7f9fc !important;
/*background-size: 42px !important;*/
text-align: center;
}
.roshi-uploadArea .left .leftText {
position: relative;
top: 64px;
height: 17px;
font-size: 12px;
color: #a6aebc;
line-height: 17px;
}
.roshi-uploadArea .right {
vertical-align: bottom;
padding-left: 20px;
}
.roshi-uploadArea .right p {
font-size: 14px;
color: #cccccc;
line-height: 20px;
}
</style>
<template>
<div class="roshi-upload" :id="uploadId">
<!-- <div class="uploadArea">
拖入上传
</div> -->
<div class="roshi-uploadArea fn0 w400 ib" :style="{ width: showTips ? '400px' : 'auto' }">
<div @mouseover="showButtonsForLogo = true" @mouseout="showButtonsForLogo = false" class="left ib"
v-if="imageUrl"
:style="{ background: `url('${ossDomain}${imageUrl}') center center /contain no-repeat` }">
<transition-group name="el-fade-in">
<div :key="1" v-show="showButtonsForLogo || uploading" class="cover"></div>
<roshi-loading :key="4" v-show="uploading && !multiple"></roshi-loading>
<el-button :key="2" size="small" v-show="showButtonsForLogo && showDelete"
class="imageButton delete" @click="deleteFile">删除
</el-button>
<el-button :key="3" :style="{ top: showDelete ? '84px' : '62px' }" v-show="showButtonsForLogo"
type="success" size="small" class="imageButton again"
@click="openUploadingDialog">重新上传</el-button>
</transition-group>
</div>
<div class="left ib" v-show="uploading && multiple">
<div class="cover"></div>
<roshi-loading></roshi-loading>
</div>
<div :id="dropAreaId" :style="{
background: `url('${ossDomain}${ossAssets}upload/20221005/0znbos.png') center 34px /24px 24px no-repeat`,
'border-color': dragIn ? '#0D55CF' : '#e4e9f2',
'border-style': dragIn ? 'dashed' : 'solid'
}" v-show="!imageUrl && !uploading" class="left ib waitUpload">
<p class="leftText">可将{{ imgOrVideo }}拖拽到这里</p>
<el-button size="small" type="success" class="imageButton upload"
@click="openUploadingDialog">上传</el-button>
</div>
<div class="right ib" v-show="showTips">
<p>格式要求:</p>
<p>1、支持Jpeg、Jpg、Png格式</p>
<p>2、大小不超过5M</p>
</div>
</div>
<input @change="fileChange" type="file" name="file" :multiple=multiple />
</div>
</template>
<script>
export default {
name: "RoshiUpload",
};
</script>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
const loadUploadUtils = () => import('@/utils/upload.js');
const props = defineProps({
imageUrl: {
type: String, // 参数类型
default: "", //默认值
required: false, //是否必传
},
showTips: {
type: Boolean,
default: false
},
showDelete: {
type: Boolean,
default: true
},
accept: {
type: String,
default: '.jpg,.jpeg,.png,'
},
limitSize: {
type: Number,
default: 5
},
multiple : {
type:Boolean,
default:true
},
imgOrVideo:{
type:String,
default:'图片'
}
})
const emits = defineEmits(['update:imageUrl', 'change'])
/* reactive data */
const uploadId = ref('fi' + window.app.$get32Id())
const dropAreaId = ref('da' + window.app.$get32Id())
const showButtonsForLogo = ref(true)
const uploading = ref(false)
// 是否放入
const dragIn = ref(false)
/* data */
/* methods */
// 此处定义一个drop容器(省略),并取到该元素;
function dragEnter(e) {
e.stopPropagation();
e.preventDefault();
dragIn.value = true
}
function dragOver(e) {
e.stopPropagation();
e.preventDefault();
}
function dragleave(e) {
e.stopPropagation();
e.preventDefault();
if (e.relatedTarget.id === uploadId.value) {
dragIn.value = false
}
}
function isChildOf(child, parent) {
if (child && parent) {
let parentNode = child.parentNode;
while (parentNode) {
if (parent === parentNode) {
return true;
}
parentNode = parentNode.parentNode;
}
}
return false;
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
uploading.value = true
dragIn.value = false
// 当文件拖拽到dropBox区域时,可以在该事件取到files
const files = e.dataTransfer.files;
let file = files[0]
let suffix = file.name.substr(file.name.lastIndexOf("."))
if (props.accept.indexOf(suffix) < 0) {
// window.app.$notify({message: '请上传.Jpeg,.Jpg,.Png类型的文件', type:'warning'})
window.app.$tip.warning(`请上传 ${props.accept}类型的文件`)
uploading.value = false
return;
}
if (file.size > 1024 * 1024 * props.limitSize) {
// window.app.$notify({message: '文件大小不能超过5M!', type:'warning'})
window.app.$tip.warning(`文件大小不能超过${props.limitSize}M!`)
uploading.value = false
return
}
upload(file);
}
const openUploadingDialog = () => {
if (uploading.value) {
// window.app.$notify({message: '存在未完成上传的文件，请稍候', type:'warning'})
window.app.$tip.warning('存在未完成上传的文件，请稍候')
return
}
document.querySelector('#' + uploadId.value + ' input').value = "";
document.querySelector('#' + uploadId.value + ' input').click();
}
const deleteFile = () => {
emits('update:imageUrl',)
emits('change')
document.querySelector('#' + uploadId.value + ' input').value = "";
}
const fileChange = (e) => {
uploading.value = true;
let input = e.target;
let files = e.target.files;
if (files && files[0]) {
let file = files[0]
let suffix = file.name.substr(file.name.lastIndexOf("."))
if (props.accept.indexOf(suffix.toLowerCase())< 0) {
// window.app.$notify({message: '请上传.Jpeg,.Jpg,.Png类型的文件', type:'warning'})
window.app.$tip.warning(`请上传${props.accept}类型的文件`)
input.value = ''
uploading.value = false
return false;
}
if (file.size > 1024 * 1024 * props.limitSize) {
// window.app.$notify({message: '文件大小不能超过5M!', type:'warning'})
window.app.$tip.warning(`文件大小不能超过${props.limitSize}M!`)
input.value = ''
uploading.value = false
return false
}
upload(file);
}
}
const upload = (file) => {
// 此处改成你的上传方法
loadUploadUtils().then((res) => {
res.uploadFile(file)
.then((res) => {
emits('update:imageUrl', res.url)
emits('change', { ...res, file })
uploading.value = false; console.log(res);
})
.catch((e) => {
console.error(e);
});
});
}
onMounted(() => {
nextTick(() => {
const dropBox = document.querySelector('#' + dropAreaId.value);
dropBox.addEventListener("dragenter", dragEnter, false);
dropBox.addEventListener("dragover", dragOver, false);
dropBox.addEventListener("dragleave", dragleave, false);
dropBox.addEventListener("drop", drop, false);
})
})
onBeforeUnmount(() => {
const dropBox = document.querySelector('#' + dropAreaId.value);
dropBox.removeEventListener("dragenter", dragEnter, false);
dropBox.removeEventListener("dragover", dragOver, false);
dropBox.removeEventListener("dragleave", dragleave, false);
dropBox.removeEventListener("drop", drop, false);
})
defineExpose({
openUploadingDialog
})
</script>
参考GPT的回答和自己的思路，以下是实现头像上传和excel导入导出功能的代码：
1.头像上传
对于头像上传，您可以使用第三方库如vue-cropperjs来实现。该库支持裁剪和上传图片，并且集成方便。另外，您也可以使用axios库来实现文件上传功能。
<template>
<div>
<div ref="imageContainer">
<img :src="imageSrc" style="max-width: 100%;">
</div>
<input type="file" @change="onFileChange">
<button @click="uploadAvatar">上传</button>
</div>
</template>
<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import axios from 'axios';
export default {
data() {
return {
imageSrc: '',
cropper: null
};
},
methods: {
onFileChange(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
this.imageSrc = event.target.result;
this.initCropper();
};
reader.readAsDataURL(file);
},
initCropper() {
this.cropper = new Cropper(this.$refs.imageContainer.querySelector('img'), {
aspectRatio: 1,
viewMode: 2
});
},
uploadAvatar() {
this.cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('avatar', blob);
axios.post('/api/upload-avatar', formData)
.then((response) => {
// 处理上传成功的逻辑
})
.catch((error) => {
// 处理上传失败的逻辑
});
});
}
}
};
</script>
2.Excel导入导出
对于Excel导入导出，您可以使用js-xlsx库来实现。该库支持解析和生成Excel文件，可以满足您的需求。另外，您也可以使用element-ui库中的el-upload组件来实现文件上传。
下面是一个使用js-xlsx和el-upload组件实现Excel导入导出的示例代码：
<template>
<div>
<el-upload
:action="uploadUrl"
:on-success="handleUploadSuccess"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">上传</el-button>
</el-upload>
<el-button size="small" type="primary" @click="exportExcel">导出</el-button>
</div>
</template>
<script>
import XLSX from 'xlsx';
import axios from 'axios';
export default {
data() {
return {
uploadUrl: '/api/upload-excel'
};
},
methods: {
beforeUpload(file) {
const fileType = file.type;
const allowedTypes = [
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
];
// 检查文件类型是否为Excel文件
if (!allowedTypes.includes(fileType)) {
this.$message.error('文件格式不正确，请上传Excel文件');
return false;
}
return true;
},
handleUploadSuccess(response) {
// 处理上传成功的逻辑
},
exportExcel() {
axios.get('/api/export-excel')
.then((response) => {
const fileName = 'data.xlsx';
const blob = new Blob([response.data], { type: 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IE浏览器
window.navigator.msSaveBlob(blob, fileName);
} else {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(url);
document.body.removeChild(link);
}
})
.catch((error) => {
// 处理导出失败的逻辑
});
}
}
};
</script>
在后端服务器中，您可以使用Java的POI库来解析和生成Excel文件。下面是一个使用POI库实现Excel导入导出的示例代码：
// 导入Excel文件
@RequestMapping(value = "/api/upload-excel", method = RequestMethod.POST)
public ResponseEntity<?> uploadExcel(@RequestParam("file") MultipartFile file) {
try (InputStream inputStream = file.getInputStream()) {
Workbook workbook = WorkbookFactory.create(inputStream);
Sheet sheet = workbook.getSheetAt(0);
List<Map<String, Object>> dataList = new ArrayList<>();
// 解析Excel文件
for (int i = 1; i <= sheet.getLastRowNum(); i++) {
Row row = sheet.getRow(i);
Map<String, Object> data = new HashMap<>();
data.put("name", row.getCell(0).getStringCellValue());
data.put("age", row.getCell(1).getNumericCellValue());
data.put("address", row.getCell(2).getStringCellValue());
dataList.add(data);
}
return ResponseEntity.ok(dataList);
} catch (IOException | EncryptedDocumentException | InvalidFormatException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
// 导出Excel文件
@RequestMapping(value = "/api/export-excel", method = RequestMethod.GET, produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public ResponseEntity<?> exportExcel() {
try (Workbook workbook = new XSSFWorkbook()) {
Sheet sheet = workbook.createSheet("数据");
List<Map<String, Object>> dataList = getDataList();
// 生成Excel文件
Row headerRow = sheet.createRow(0);
headerRow.createCell(0).setCellValue("姓名");
headerRow.createCell(1).setCellValue("年龄");
headerRow.createCell(2).setCellValue("地址");
for (int i = 0; i < dataList.size(); i++) {
Row row = sheet.createRow(i + 1);
Map<String, Object> data = dataList.get(i);
row.createCell(0).setCellValue((String) data.get("name"));
row.createCell(1).setCellValue((double) data.get("age"));
row.createCell(2).setCellValue((String) data.get("address"));
}
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
workbook.write(outputStream);
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.setContentDispositionFormData("attachment", "data.xlsx");
headers.setContentLength(outputStream.size());
return new ResponseEntity<>(outputStream.toByteArray(), headers, HttpStatus.OK);
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
// 获取数据
private List<Map<String, Object>> getDataList() {
List<Map<String, Object>> dataList = new ArrayList<>();
Map<String, Object> data1 = new HashMap<>();
data1.put("name", "张三");
data1.put("age", 25);
data1.put("address", "北京市");
Map<String, Object> data2 = new HashMap<>();
data2.put("name", "李四");
data2.put("age", 30);
data2.put("address", "上海市");
Map<String, Object> data3 = new HashMap<>();
data3.put("name", "王五");
data3.put("age", 35);
data3.put("address", "广州市");
dataList.add(data1);
dataList.add(data2);
dataList.add(data3);
return dataList;
这段代码中，我们定义了两个请求处理方法：uploadExcel()和exportExcel()。uploadExcel()方法用于处理Excel文件的导入，它将Excel文件解析为一个包含所有数据的列表，并返回给前端；exportExcel()方法用于处理Excel文件的导出，它使用POI库生成一个包含指定数据的Excel文件，并将其作为响应发送给前端。
希望这些示例代码可以帮助您完成头像上传和Excel导入导出功能的开发。如果您需要进一步的帮助，可以提出具体的问题，我将尽力回答。
- 看下这篇博客，也许你就懂了，链接：element-ui 上传组件进度条解决方法
- 除此之外, 这篇博客: vue用element-ui后台springboot实现注册上传头像，登录显示头像（图片存至本地）中的 1.注册上传头像， 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
用element-ui的上传组件，action为默认请求地址，必须写，由于我的项目是前后分离，要跨域，所以不用默认的action
地址，设置为#即可，auto-upload自动上传设为false，自定义点击注册按钮时再上传。
:on-change="handleChange"选择图片改变时触发此方法，我们可以在其中从fileList获得文件，然后利用
window.URL.createObjectURL(file.raw);方法生成本地文件的url，供临时预览。文件被删除或移动，或者session刷新后，此url都会失效。如果imgUrl存在，就显示此图片，并将上传图片的样式隐藏。
注册方法
关于头像上传和Excel导入导出功能，我可以提供一些一般性的建议：
头像上传：可以使用第三方的文件上传组件，如FineUploader、Dropzone等。或者使用Spring Boot中的MultipartFile接口进行文件上传。另外需要注意的是，文件上传时需要对文件大小、格式、安全性等进行相关校验。
Excel导入导出：可以使用Apache POI或者EasyPOI等Java类库进行Excel的读写操作。具体实现可以参考官方文档或者相关博客教程。
如果有具体的问题或者错误信息，也可以提供更详细的信息以便更好地解决问题。