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

学习完了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-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>

      <!-- 讲师头像：TODO -->
      <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服务尽量结束后再重启。