需要在项目里打开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.name
const 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 = false
const isLt200M = file.size / 1024 / 1024 < 200
if (['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 = 3
state.ContentTypes = 'application/pdf' // 这里改成pdf类型即可
}
if (!isLt200M) {
$message({
message: '上传课件大小不能超过 200MB!',
type: 'error',
})
} else {
flag = true
}
}
return flag
}
// 课件上传后
const uploadFileVideos = async file => {
try {
state.loading = true
const fileData = file.file
fileData.ContentType = state.ContentTypes
return putObject(fileData)
.then(res => {
// console.log('天翼云课件上传后', res)
state.coursewareTemplate.coursewareUrl = res
state.coursewareTemplate.fileName = fileData.name
state.choosTheFile = fileData.name
state.isUpdata = true
state.loading = false
})
.catch(() => {
$message({
message: '上传失败!',
type: 'error',
})
})
} catch (error) {
console.log(error)
}
}
这是页面预览代码
<!-- 播放附件 -->
<el-dialog title
:visible="isShow"
width="80%"
@close="closeDialog">
<video :src="videoUrl"
controls
autoplay
v-if="fileType===1 ||fileType===2"
class="video"
width="100%"></video>
<div class="pdf"
v-if="fileType===3">
<iframe class="pdf_iframe"
:src="videoUrl"
:key="videoUrl"></iframe>
</div>
</el-dialog>
// 播放当前附件
const playVideo = item => {
const type = interceptFileType(item.fileName)
if (type === 1 || type === 2) {
state.fileType = 1
state.videoUrl = item.coursewareUrl
} else if (type === 3) {
state.fileType = 3
state.videoUrl = item.coursewareUrl
}
state.isShow = true
}