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

我不是女神ヾ 2021-06-24 13:58 718阅读 1赞

学习完了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="请选择">
              
              <el-option :value="1" label="高级讲师"/>
              <el-option :value="2" label="首席讲师"/>
            </el-select>
          </el-form-item>
          <el-form-item label="讲师资历">
            <el-input v-model="teacher.career"/>
          </el-form-item>
          <el-form-item label="讲师简介">
            <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
          </el-form-item>
    
          
          <el-form-item label="讲师头像">
            
            <pan-thumb :image="teacher.avatar"/>
            
            <el-button type="primary" icon="upload" @click="imagecropperShow=true">更换头像
            </el-button>
          </el-form-item>
    
          
          <image-cropper
            v-show="imagecropperShow"
            :width="300"
            :height="300"
            :key="imagecropperKey"
            :url="BASE_API + '/admin/oss/file/upload'"  
            field="file"
            lang-type="en"
            @close="close"
            @crop-upload-success="cropSuccess"/>
    
          
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form>
      </div>
    </template>
    
    <script>
    
    import teacher from '@/api/edu/teacher'
    import ImageCropper from '@/components/ImageCropper'
    import PanThumb from '@/components/PanThumb'
    
    // 绑定我们表单的数据
    const defaultForm = {
      name: '',
      sort: 0,
      level: 1,
      career: '',
      intro: '',
      avatar: 'https://coding-edu.oss-cn-beijing.aliyuncs.com/avatar/dafault.jpg'
    }
    
    export default {
      components: { ImageCropper, PanThumb },
      data() {
        // 定义我们返回的对象
        return {
          teacher: defaultForm,
          saveBtnDisabled: false, // 保存按钮是否禁用,
          imagecropperShow: false,
          imagecropperKey: 0,
          BASE_API: process.env.BASE_API
        }
      },
    
      // watch监视，当我们的路由发生了变化，就执行这个方法
      watch: {
        $router(to, from) {
          console.log('watch  $router')
          this.init()
        }
      },
    
      // 钩子函数！ created 在页面渲染前调用方法, 如果页面是同一个，数据不会刷新！只会进行一次！
      created() {
        console.log('created')
        this.init()
      },
    
      methods: {
        init() {
          if (this.$route.params && this.$route.params.id) {
            const id = this.$route.params.id
            this.fetchDataById(id)
          } else {
            this.teacher = { ...defaultForm }
          }
        },
        // 上传成功
        cropSuccess(data) {
          console.log(data)
          this.imagecropperShow = false
          this.teacher.avatar = data.url
        },
        // 关闭
        close() {
          this.imagecropperShow = false
        },
        saveOrUpdate() {
          this.saveBtnDisabled = true
          if (!this.teacher.id) {
            this.saveData()
          } else {
            this.updateData()
          }
        },
    
        //以下为其他业务脚本代码
        // 更新
        updateData() {
          teacher.updateById(this.teacher).then(response => {
            return this.$message({
              type: 'success',
              message: '修改成功！!'
            })
          }).then(response => {
            this.$router.push({ path: '/edu/teacher' })
          })
        },
        // 保存 ，如果自己理解逻辑！重启一下！
        saveData() {
          teacher.save(this.teacher).then(response => {
            return this.$message({
              type: 'success',
              message: '保存成功！!'
            })
          }).then(response => {
            this.$router.push({ path: '/edu/teacher' })
          })
        },
    
        // 拿到后端的数据之后，去查询数据即可！
        fetchDataById(id) {
          teacher.getById(id).then(response => {
            console.log(response) // 成功拿到数据了，并且我们将新增和修改的页面请求处理完毕！
            this.teacher = response.data.item
          })
        }
      }
    }
    </script>
    <style>
    </style>

2、后台Controller添加文件上传请求方法。

@Api(description = "阿里云文件管理")
    @RestController
    @CrossOrigin // 跨域
    @RequestMapping("/admin/oss/file")
    public class FileController {
    
        @Autowired
        private FileService fileService;
    
        @ApiOperation(value = "文件上传")
        @PostMapping("upload")
        public R upload(
                @ApiParam(name = "file",value = "文件",required = true)
                @RequestParam MultipartFile file){
            String uploadUrl = fileService.upload(file);
            return R.ok().message("文件上传成功").data("url",uploadUrl);
        }
    
        @ApiOperation(value = "test")
        @GetMapping("test")
        public R test(){
            return R.ok();
        }
    }

3、在Nginx配置文件nginx.conf中配置分发路由。

server{
      listen 8210;   #监听端口（默认监听接口为80）
      server_name localhost; #服务名
    
      location ~ /admin/oss{ #请求路径含 /admin/sysuser的请求转发到8210端口
              proxy_pass http://localhost:8310;
      }
    }

其余实现细节在之前的文章中已经提过，在此不再赘述。

## 总结 ##

1、关于Vue组件的说明：一定要导入对应的组件，可以参考一下vue-admin中的默认实现操作。  
2、注意js的交互问题，如果报405错误，那就是Nginx的进程问题，Nginx服务尽量结束后再重启。