2024/04/26（团队开发）
今天是团队开发的第七天，在今天的例会上，我向我的团队成员们分享了我的表结构的设计，他们也暂时未提出什么不足的地方，他们也可以参照我的设计的表来设计其他的表，我今天就开始了下一步任务，设计前端页面并且开始实现视频的上传任务。
<template> <view style="height: 730px;" > <view> <textarea placeholder="添加作品描述" v-model="information.description"> </textarea> </view> <view class="flex-wrap"> <view class="ver-mid"> <text> 请选择视频的封面 </text> </view> <view class="selected_img" v-if="imagesrc"> <view class="uploader_img"> <image class="vid" :src="imagesrc" controls="false"></image> <view class="icon_delete_img" @tap="delectImage">×</view> </view> </view> <view class="select_viedo_border"> <image class="select_pic" @tap="selectCover" src="../../static/image/sel.png"></image> </view> </view> <view class="flex-wrap"> <view class="ver-mid"> <text > 请选择要上传的视频 </text> </view> <view class="selected_viedo" v-if="videosrc"> <view class="uploader_video"> <video class="vid" :src="videosrc" controls="false"></video> <view class="icon_delete_video" @tap="delectVideo">×</view> </view> </view> <view class="select_viedo_border"> <image class="select_pic" @tap="selectVideo" src="../../static/image/sel.png"></image> </view> </view> <button @click="uploadmes" size="default">上传</button> </view> </template>
<script> export default { data() { return { imagesrc: '',//本地图片的地址 videosrc:'',//本地视频的地址 information:{ userid:'1',//用户的id description:'',//视频的描述信息 cover_url:'',//视频封面url video_url: '',//视频的url } } }, methods: { selectCover:function(){ var self=this; uni.chooseImage({ count:1, sizeType: ['original', 'compressed'], success:function(res){ self.imagesrc=res.tempFilePaths[0]; uni.uploadFile({ url: 'http://192.168.179.138:8080/upload', //上传地址 name: 'file', filePath:self.imagesrc, success:function(uploadRes){ console.log(uploadRes); self.information.cover_url=uploadRes.data; uni.showToast({ title: '上传成功' }); }, fail:function(error){ console.log(error); uni.showToast({ title: '上传失败' }); }, }); } }); }, selectVideo: function() { var self = this; uni.chooseVideo({ sourceType: ['album'], success: function(res) { self.videosrc = res.tempFilePath; uni.uploadFile({ url: 'http://192.168.179.138:8080/upload', //上传地址 name: 'file', filePath: self.videosrc, success: function(uploadRes) { console.log(uploadRes); self.information.video_url=uploadRes.data; uni.showToast({ title: '上传成功' }); }, fail: function(error) { // 上传失败处理逻辑 console.log(error); uni.showToast({ title: '上传失败' }); }, }); }, }); }, delectVideo: function() { uni.showModal({ title:"提示", content:"是否要删除此视频", success:(res) =>{ if(res.confirm){ this.videosrc = ''; this.information.video_url='' } } }) }, delectImage: function() { uni.showModal({ title:"提示", content:"是否要删除此封面图片", success:(res) =>{ if(res.confirm){ this.imagesrc = ''; this.information.cover_url='' } } }) }, }, } </script>
后端代码：
controller层
package com.share.viedo_app.controller; import com.share.viedo_app.pojo.Result; import com.share.viedo_app.pojo.Video; import com.share.viedo_app.service.Impl.VideoServiceImpl; import com.share.viedo_app.service.VideoService; import com.share.viedo_app.util.AliOSSUtils; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.util.List; @Slf4j @RestController public class UploadController { @Autowired private AliOSSUtils aliOSSUtils; @Autowired private VideoService videoService; @PostMapping("/upload") public String uploadVideo(MultipartFile file)throws Exception{ log.info("文件上传：{}",file.getOriginalFilename()); String url=aliOSSUtils.upload(file); log.info("文件上传完成，文件访问的url:{}",url); return url; } }
工具类：
这里的endpoint和bucketName都放在配置文件中，然后用该类进行读取
package com.share.viedo_app.util; import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component; @Data @Component @ConfigurationProperties(prefix = "aliyun.oss") public class AliOSSproperties { private String endpoint; private String bucketName; }
package com.share.viedo_app.util; import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import com.aliyun.oss.common.auth.CredentialsProviderFactory; import com.aliyun.oss.common.auth.EnvironmentVariableCredentialsProvider; import com.aliyun.oss.model.PutObjectRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import org.springframework.web.multipart.MultipartFile; import java.io.InputStream; import java.util.UUID; @Component public class AliOSSUtils { @Autowired AliOSSproperties aliOSSproperties; public String upload(MultipartFile file) throws Exception{ String endpoint=aliOSSproperties.getEndpoint(); String bucketName=aliOSSproperties.getBucketName(); // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。 EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider(); InputStream inputStream=file.getInputStream(); //获取原始文件名 String originalFilenmae =file.getOriginalFilename(); //构造唯一的文件名（不能重复） -uuid 通用唯一识别码 String fileName= UUID.randomUUID().toString()+originalFilenmae.substring(originalFilenmae.lastIndexOf(".")); // 创建OSSClient实例。 OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider); PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName,fileName, inputStream); ossClient.putObject(putObjectRequest); String url=endpoint.split("//")[0]+"//"+bucketName+"."+endpoint.split("//")[1]+"/"+fileName; ossClient.shutdown(); return url; } }
预计时间3小时：
我初步设计的流程是，先将视频和封面上传到阿里云后，拿到返回的url，将其放置在information中来携带到后端中来存储到数据库中。
开始时编写有关代码还是比较通顺的，预计可以在预计时间内完成，但是到了上传完成后的最后一步，返回url到前端应用时出现了问题。
开始时我获取的结果为.data.data，里面是空的，然后找了一会原因将获取返回的结果改为.data里面的东西明显不是一个url地址，然后我发现uni.uploadFile是有固定的返回格式的，我后端使用result类封装返回是不行的，会将其自动toString。所以今天的任务超时1小时。
