天翼云上传pdf文件,不能直接打开，需下载再看问题记录

需要在项目里打开pdf文件预览，之前的文件一直使用阿里云上传，拿到的地址是可以直接通过iframe直接打开，因要求换成天翼云上传文件后，返回的地址不能直接打开，要点击时保存到本地再打开。。

研究了一下逻辑是没有问题的 ，动态改变地址，那就是上传的问题，找到天翼云上传时需要上传content-type，没有上传时后默认

上传时改变content-type即可

import oosConfig from './oos-config'const initOSS = () => {return new window.OOS.S3({accessKeyId: oosConfig.accessKeyId,secretAccessKey: oosConfig.accessKeySecret,endpoint: oosConfig.endPoint,signatureVersion: 'v2',apiVersion: '2006-03-01',s3ForcePathStyle: true})
}export const putObject = async (file) => {const client = initOSS()const key = file.nameconst params = {Body: file,Bucket: oosConfig.bucket,Key: key,ContentType: file.ContentType // 设置contentType, 默认是application/octet-stream}return new Promise((resolve, reject) => {client.putObject(params, (err, data) => {if (err) {reject(err)} else {console.log(data)resolve(`https://${oosConfig.endPoint}/${oosConfig.bucket}/${key}`)}})})
}

 // 课件上传前const beforeAvatarUploadVideos = file => {let flag = falseconst isLt200M = file.size / 1024 / 1024 < 200if (['video/mp4', 'audio/mpeg', 'application/pdf'].indexOf(file.type) === -1) {$message({message: '请上传mp4或mp3或pdf格式的文件!',type: 'error',})} else {if (file.type === 'video/mp4' || file.type === 'audio/mpeg') {const url = window.URL.createObjectURL(file)const audioElement = new Audio(url)audioElement.addEventListener('loadedmetadata', () => {state.coursewareTemplate.timeLength = Math.round(audioElement.duration * 100) / 100})if (file.type === 'video/mp4') {state.coursewareTemplateType = 1} else {state.coursewareTemplateType = 2}state.ContentTypes = '' // 非pdf类型，不传让他默认就行} else {state.coursewareTemplateType = 3state.ContentTypes = 'application/pdf' // 这里改成pdf类型即可}if (!isLt200M) {$message({message: '上传课件大小不能超过 200MB!',type: 'error',})} else {flag = true}}return flag}// 课件上传后const uploadFileVideos = async file => {try {state.loading = trueconst fileData = file.filefileData.ContentType = state.ContentTypesreturn putObject(fileData).then(res => {// console.log('天翼云课件上传后', res)state.coursewareTemplate.coursewareUrl = resstate.coursewareTemplate.fileName = fileData.namestate.choosTheFile = fileData.namestate.isUpdata = truestate.loading = false}).catch(() => {$message({message: '上传失败!',type: 'error',})})} catch (error) {console.log(error)}}

这是页面预览代码 

 // 播放当前附件const playVideo = item => {const type = interceptFileType(item.fileName)if (type === 1 || type === 2) {state.fileType = 1state.videoUrl = item.coursewareUrl} else if (type === 3) {state.fileType = 3state.videoUrl = item.coursewareUrl}state.isShow = true}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！