对象存储OSS之头像上传实现 我不是女神ヾ 2021-06-24 13:58 648阅读 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="请选择"> <!-- 数据类型一定要和取出的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服务尽量结束后再重启。
还没有评论,来说两句吧...