天翼云上传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.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
        }