对象存储OSS之头像上传实现

最新推荐文章于 2024-02-29 20:31:56 发布

原创

最新推荐文章于 2024-02-29 20:31:56 发布 · 846 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#OSS #对象存储 #头像上传 #vue.js #spring boot

本文介绍了如何利用Vue.js前端和Spring Boot后端实现阿里云OSS头像上传功能。首先在前端创建form.vue页面，使用image-cropper组件展示并上传头像，通过点击事件触发后台接口。后端Controller配置文件上传方法，同时在Nginx配置文件中设置路由分发。遇到405错误可能与Nginx进程有关，建议服务停止后再重启。

学习完了OSS，我们来实现一个头像上传功能。基本思路就是在前端上传一个本地文件，点击上传按钮将其上传到阿里云服务器上，后台文件上传功能需要使用到OSS的API来实现。

头像上传

1、在前端项目中新增文件上传页面form.vue，使用image-cropper组件来显示头像，添加更换头像按钮，绑定点击事件，并向后台上传接口发送请求（在image-cropper组件中配置:url属性）。

<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" :min="0" controls-position="right"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-