最近遇到了一个新的需求，需要把原先上传文件的方式改为利用天翼云oos对象存储上传。这个问题着实卡了我好几天时间，不过方法总比困难多，最后也是成功实现文件的上传。话不多说，接下来列举实现步骤。（实现过程中，部分页面可能存在样式丑陋问题，请先忽略）
关于天翼云的其他配置，可以参考这份文件
oos开发文档.
一、引入静态资源
在public目录index.html文件中引入静态资源，如下所示：
二、引入element上传组件
html部分我只做截图展示，这个地方我封装了一个组件，如下图所示
三、创建oos对象
//对上传的文件做限制beforeUpload(file) {let fileSize = file.size / 1024 / 1024;if (fileSize > 1024) {this.fileList = [];return this.$message.warning("文件大小不能超过1G");}if (file.type !== "video/mp4") {this.fileList = [];return this.$message.warning("课件资源只能上传mp4格式文件");}},//文件上传async pickFile(f) {const file = f.file;//获取临时授权令牌const {code, data } = await this.$api.base.temporaryToken();if (code != 200) return;const s3Config = {accessKeyId: data.accessId,secretAccessKey: data.accessSecret,endpoint: 'oos',signatureVersion: "v4", // 可选v2 或v4apiVersion: "-03-01",s3ForcePathStyle: true,};//设置tokenif (data.sessionToken.length > 0) {s3Config.sessionToken = data.sessionToken;}const client = new OOS.S3(s3Config);let key = `RESOURCE/RESOURCE/keyName`;let params = {Body: file,Bucket: '',Key: key,ContentLength: file.size,ContentType:'video/mp4'//上传视频文件若没有设置该字段，我试过待会获取链接之后打开无法访问};let that = this;client.putObject(params, function (err, data) {if (err) {that.$message("上传失败");} else {that.$message("上传成功");that.fileList = [];//上传成功后，文件列表清空//保存上传记录const url = URL.createObjectURL(file);const audioElement = new Audio(url);audioElement.addEventListener("loadedmetadata", async () => {let record = {id: res_keyId.data,key: key,bucket: '',fileType: '',//上传的文件类型，fileOriginalName: file.name,businessCode: '',materialCode: '',fileSize: file.size,};//若上传的为视频，需要给后端传递视频时长if (video) {record.videoFileDuration = Math.floor(audioElement.duration);}//传递给后端，保存上传记录const res_recore = await that.$api.base.saveRecord(record);if (res_recore.code != 200) return;that.$emit("uploadSuccess", true);//获取文件临时访问路径const res_router = await that.$api.base.getTemporaryRouter({objKey: key,});if (res_router.code != 200) return;that.$emit("getTemporaryRouter", res_router.data);});}});},confirmUpload() {this.$refs.upload.submit();},
四、上传文件
最后在需要上传的地方引用上传组件，就选择文件进行上传了。
