element-upload 文件上传和图片上传

element-upload介绍

element-ui是一个很常用的文件上传组件，他包括但不局限于只上传图片，很多时候用于系统的头像修改就是用这个组件
在官网element-ui（element-upload）有着完整的介绍，这里就不多做描述了，具体的内容可以看文档

实际上的文件上传代码

前端

 <el-upload ref="uploadExcel" action="后端的实际文件上传的接口地址" :limit="1"
                        :auto-upload="false" accept=".xlsx" :before-upload="beforeUploadFile" :on-change="fileChange"
                        :on-exceed="exceedFile" :on-success="handleSuccess" :on-error="handleError">
                        <el-button  type="success">导入成绩</el-button>
                        <el-button type="primary" @click="uploadClick">确 定</el-button>
                    </el-upload>

上面是简单的一个element-upload组件上传文件的一个基础布置。一开始我在文件上传这里一直显示接口报错，导致数据传输错误，也是在网上多番查看，才解决
相应的方法代码在下面

//导入成绩
         uploadClick() {
            this.$refs.uploadExcel.submit()
        },


        // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
        beforeUploadFile(file) {
             console.log(file,"文件")
            const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
            const size = file.size / 1024 / 1024
            if (extension !== 'xlsx') {
                this.$notify.warning({
                    title: '警告',
                    message: `只能上传Excel（即后缀是.xlsx）的文件`
                })
            }
            if (size > 10) {
                this.$notify.warning({
                    title: '警告',
                    message: `文件大小不得超过10M`
                })
            }
        },
        // 文件状态改变时的钩子
        fileChange(file, fileList) {
             console.log(file,"文件状态改变")
             console.log(fileList,"文件列表")
        },
        // 文件超出个数限制时的钩子
        exceedFile(files, fileList) {
            this.$notify.warning({
                title: '警告',
                message: `只能选择1 个文件，当前共选择了 ${files.length + fileList.length} 个`
            })
        },
        // 文件上传成功时的钩子
        handleSuccess(res, file, fileList) {
            console.log(res,"接口返回成功")
            // this.formData.url = res.data  //服务器返回的文件地址
            this.$message({
                message: '文件上传成功',
                type: 'success'
            })
            this.$refs.uploadExcel.clearFiles()// 清除上次上传记录
        },
        // 文件上传失败时的钩子
        handleError(err, file, fileList) {
            this.$message.error(err.msg)
        },

确定按钮的方法是在 Vue 组件中调用 Upload 组件的提交方法的方式。通常情况下，当你选择文件后，Upload 组件会自动触发上传操作。但有时你可能需要在其他操作或事件中手动触发上传，例如在点击某个按钮时上传文件。这时，你可以使用 this.$refs.uploadExcel.submit() 来手动触发上传操作。

请注意，调用 submit() 方法之前，确保已经选择了要上传的文件，否则可能会导致错误。
这里我之所以加一个按钮，进行触发，是因为我将自动上传设置成了false，如果你们想要自动上传的话，只需把auto-upload这个设置成true

java后端

@PostMapping("/import")
    public ResultVo importExcel(MultipartFile file){
        try{
            InputStream inputStream=file.getInputStream();
            String filename = file.getOriginalFilename();
            if(StringUtils.isBlank(filename)){
                return ResultVo.error("没有上传文件");
            }
            if (filename.lastIndexOf(".") != -1
                    && !".xlsx".equals(filename.substring(filename.lastIndexOf(".")))
                    && !".xls".equals(filename.substring(filename.lastIndexOf(".")))
            ) {
                return ResultVo.error("文件名格式不正确, 请使用后缀名为.xlsx的文件");
            }

            ExcelReader reader = ExcelUtil.getReader(inputStream);
            assembleReader(reader);
            List<Grade> gradeList = reader.readAll(Grade.class);
            for (Grade grade:gradeList
                 ) {
                String stuSno=grade.getStuSno();
                Student student = studentMapper.selectOne(Wrappers.<Student>lambdaQuery().eq(Student::getSno, stuSno));
                if(student==null){
                    return ResultVo.error(student.getSno()+"学号不存在，导入失败");
                }
                grade.setStuId(student.getId());
                grade.setId(IdTools.getId());
                grade.setCreateTime(new Date());
            }
            gradeService.saveBatch(gradeList);


        }
        catch (IOException e) {
            e.printStackTrace();
            return ResultVo.error("文件上传失败");
        }
        return ResultVo.success();
    }
    private void assembleReader(ExcelReader excelReader) {

        excelReader.addHeaderAlias("学号", "stuSno");
        excelReader.addHeaderAlias("学生姓名", "stuName");
        excelReader.addHeaderAlias("授课教师编号", "teaId");
        excelReader.addHeaderAlias("授课教师名称", "teaName");
        excelReader.addHeaderAlias("课程编号", "courseId");
        excelReader.addHeaderAlias("课程名称", "courseName");
        excelReader.addHeaderAlias("成绩", "score");
        excelReader.addHeaderAlias("学分", "credit");

    }

请注意，如果有写授权的话，一定要记得把授权放开，否则会报token无效（读不到有效的token）

补充

如果是上传图片的话，记得对应upload传递的参数名称

这个name是用来设置文件上传的字段名的，如果你的后端接收的字段名是image但是你没有做修改，前端传的字段名是这个name，并且会有一种上传成功的假象，他返回的图片url前面会加上blob前缀。
就是因为这个name没有修改导致我当时找问题找了很久，因为明明显示图片已经做了修改，但是存在数据库中的url就是多了前缀，而且浏览器一刷新就显示图片加载异常
所以大家一定要注意细节，否则就容易像我一样，因为这个，导出debug，最后还是求助了大佬才解决了。哭死