【备战春招】第21天 使用el-upload组件上传医生照片

课程名称：SpringBoot2.X + Vue + UniAPP，全栈开发医疗小程序

课程章节：第三章 使用Vue3.0+SpringBoot实现医护人员管理

课程讲师： 神思者

课程内容：

一、业务层代码

在com.example.hospital.api.service包DoctorService接口中，声明抽象方法。

public interface DoctorService {

    ……

    public void updatePhoto(MultipartFile file, Integer doctorId);

}

在com.example.hospital.api.service.impl包DoctorServiceImpl类中，实现抽象方法。

@Service

@Slf4j

public class DoctorServiceImpl implements DoctorService {

    @Value("${minio.endpoint}")

    private String endpoint;

    @Value("${minio.access-key}")

    private String accessKey;

    @Value("${minio.secret-key}")

    private String secretKey;

    ……

    @Override

    @Transactional

    public void updatePhoto(MultipartFile file, Integer doctorId) {

        try {

            String filename = "doctor-" + doctorId + ".jpg";

            //在Minio中保存医生照片

            MinioClient client = new MinioClient.Builder().endpoint(endpoint)

                    .credentials(accessKey, secretKey).build();

            client.putObject(PutObjectArgs.builder().bucket("hospital")

                    .object("doctor/" + filename)

                    .stream(file.getInputStream(), -1, 5 * 1024 * 1024)

                    .contentType("image/jpeg").build());

            //更新医生表photo字段

            doctorDao.updatePhoto(new HashMap() {{

                put("id", doctorId);

                put("photo", "/doctor/" + filename);

            }});

        } catch (Exception e) {

            log.error("保存医生照片失败", e);

            throw new HospitalException("保存医生照片失败");

        }

    }

}

二、Web层代码

在com.example.hospital.api.controller包DoctorController类中，声明Web方法。

@RestController

@RequestMapping("/doctor")

public class DoctorController {

    @PostMapping("/updatePhoto")

    @SaCheckLogin

    @SaCheckPermission(value = {"ROOT", "DOCTOR:UPDATE"}, mode = SaMode.OR)

    public R updatePhoto(@Param("file") MultipartFile file, @Param("doctorId") Integer doctorId) {

        doctorService.updatePhoto(file, doctorId);

        return R.ok();

    }

}

三、熟悉Vue页面

在ElementPlus组件库中，el-upload标签可以上传文件。

<el-upload

    class="avatar-uploader"

    :action="action"

    :headers="{ token: token }"

    with-credentials="true"

    :on-success="updatePhotoSuccess"

    :on-error="updatePhotoError"

    :show-file-list="false"

    :data="{ doctorId: scope.row.id }"

>

    <el-image style="width: 100px; height: 100px" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="content.photo" :fit="fit">

        <template #error>

            <div class="error-img">

                <el-icon><Picture /></el-icon>

            </div>

        </template>

    </el-image>

</el-upload>

在页面的模型层中声明了token和action变量，如下：

data() {

    return {

        token: localStorage.getItem('token'),

        action: `${this.$baseUrl}/doctor/updatePhoto`,

        ……

    };

},

四、编写JavaScript代码

照片上传成功后，在触发的回调函数中，需要重新加载医生的照片；倘若照片上传失败，页面要弹出提示消息。

updatePhotoSuccess: function() {

    this.content.photo = `${this.$minioUrl}/doctor/doctor-${this.content.id}.jpg?random=${Math.random()}`;

},

updatePhotoError: function() {

    ElMessage({

        message: '文件上传失败',

        type: 'error',

        duration: 1200

    });

},

课程收获：通过视频加文档结合的方式，学习了使用el-upload组件上传医生照片，期待后续学习！