使用el-upload前端通过获取后端验签的结果上传文件到oss或tos

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：记录遇到的一些问题：
之前一直将文件上传到oss，现在要换成上传到tos，它们的使用有一点区别

---

提示：以下是本篇文章正文内容，下面内容可供参考

一、上传到oss

<template>
    <el-upload :accept="accept.join(',')" drag :action="host" :show-file-list="false" :data="objData"
        :before-upload="uploadBefore" :on-success="uploadSucccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
            <p>将文件拖到此处，或<em>点击上传</em></p>
            <p class="upload-tips">1.仅支持图片和视频文件,上传添加不超过500个</p>
            <p class="upload-tips">2.支持图片格式: png、jpg、jpeg、 gif、bmp；支持视频格式: mp4、mpeg、3pg、 avi</p>
            <!-- <p class="upload-tips">3.素材上传后需对尺寸、码率等进行分析，约1-3分钟后方可用于投放</p> -->
        </div>
        <div class="el-upload__tip" slot="tip">
            <!-- 只能上传jpg/png文件，且不超过500kb -->
            <p>1）方图，宽高比=1:1，尺寸≥600*600, 文件大小≤10M，大小10M以下</p>
            <p>2）小图，宽高比1.52，大小1.5M以下，下限：456 & 300，上限：1368 & 900</p>
            <p>3）大图，横版大图宽高比1.78，大小1.5M以下，下限：1280 & 720，上限：2560 & 1440</p>
            <p>4）大图竖图，宽高比0.56，大小1.5M以下，下限：720 & 1280，上限：1440 & 2560</p>
            <p>5）横版视频，封面图宽高比1.78（下限：1280 & 720，上限：2560 & 1440）），宽高比16:9，大小不超过1000M</p>
            <p>6）竖版视频，封面图宽高比0.56（9:16），下限：720 & 1280，上限：1440 & 2560，大小不超过100M</p>
        </div>
    </el-upload>
</template>
<script>
    export default {
        data() {
            return {
                // 素材上传类型
                accept: [
                    '.png', '.jpg', '.jpeg', '.gif', '.bmp',
                    '.mp4', '.mpeg', '.3pg', '.avi'
                ],
                // 上传地址(一定要放到外面，不能放到 objData 里一起上传到验签接口【与oss不同，oss可以放到 objData 】，会报错)
                host: 'https:xxxxxxxxxxxxxxxxxxxxx',
                // 上传文件时附带的额外参数
                objData: {},
            }
        },
        methods: {
            // 上传前执行
            uploadBefore(file) {
                return new Promise((resolve, reject) => {
                    // 请求后端接口拿到验签数据(需要把文件存储路径带上)
                    uploadSignature({ filePath: filePath + fileName })
                        .then((response) => {
                            // response.data.originPolicy 里有文件存储路径，在下面的key需要
                            // let res = JSON.parse(response.data.originPolicy)
                            // _self.objData.key = res.conditions[4].key
                            _self.objData.key = filePath + fileName
                            _self.objData.policy = response.data.policy
                            _self.objData['x-tos-algorithm'] = response.data.algorithm
                            _self.objData['x-tos-credential'] = response.data.credential
                            _self.objData['x-tos-date'] = response.data.date
                            _self.objData['x-tos-signature'] = response.data.signature
                            resolve(true) // 继续上传
                        })
                        .catch(function (error) {
                            this.$message.error('验签错误')
                            reject(new Error(false)) // 停止上传
                        })
                        .finally(() => {

                        });


                })
            },
            // 上传成功后执行
            uploadSucccess(response, file, fileList) {

            }
        }
    }
</script>

二、上传到tos

<template>
    <el-upload :accept="accept.join(',')" drag :action="host" :show-file-list="false" :data="objData"
        :before-upload="uploadBefore" :on-success="uploadSucccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
            <p>将文件拖到此处，或<em>点击上传</em></p>
            <p class="upload-tips">1.仅支持图片和视频文件,上传添加不超过500个</p>
            <p class="upload-tips">2.支持图片格式: png、jpg、jpeg、 gif、bmp；支持视频格式: mp4、mpeg、3pg、 avi</p>
            <!-- <p class="upload-tips">3.素材上传后需对尺寸、码率等进行分析，约1-3分钟后方可用于投放</p> -->
        </div>
        <div class="el-upload__tip" slot="tip">
            <!-- 只能上传jpg/png文件，且不超过500kb -->
            <p>1）方图，宽高比=1:1，尺寸≥600*600, 文件大小≤10M，大小10M以下</p>
            <p>2）小图，宽高比1.52，大小1.5M以下，下限：456 & 300，上限：1368 & 900</p>
            <p>3）大图，横版大图宽高比1.78，大小1.5M以下，下限：1280 & 720，上限：2560 & 1440</p>
            <p>4）大图竖图，宽高比0.56，大小1.5M以下，下限：720 & 1280，上限：1440 & 2560</p>
            <p>5）横版视频，封面图宽高比1.78（下限：1280 & 720，上限：2560 & 1440）），宽高比16:9，大小不超过1000M</p>
            <p>6）竖版视频，封面图宽高比0.56（9:16），下限：720 & 1280，上限：1440 & 2560，大小不超过100M</p>
        </div>
    </el-upload>
</template>
<script>
    export default {
        data() {
            return {
                // 素材上传类型
                accept: [
                    '.png', '.jpg', '.jpeg', '.gif', '.bmp',
                    '.mp4', '.mpeg', '.3pg', '.avi'
                ],
                // 上传地址(一定要放到外面，不能放到 objData 里一起上传到验签接口【与oss不同，oss可以放到 objData 】，会报错)
                host: 'https:xxxxxxxxxxxxxxxxxxxxx',
                // 上传文件时附带的额外参数
                objData: {
					OSSAccessKeyId: '',
          			policy: '',
			        Signature: '',
			        key: '',
			        host: '',
			        dir: ''
				},
            }
        },
        methods: {
            // 上传前执行
            uploadBefore(file) {
                return new Promise((resolve, reject) => {
                    // 请求后端接口拿到验签数据(需要把文件存储路径带上)
                    uploadSignature({})
                        .then((response) => {
                            _self.objData.OSSAccessKeyId = response.data.accessid
	                        _self.objData.policy = response.data.policy
	                        _self.objData.Signature = response.data.signature
	                        _self.objData.host = response.data.host
	                        // xxx/xxx
	                        _self.objData.dir = response.data.dir
	                        // xxx/xxx/xxx.jpg
	                        _self.objData.key = filePath + fileName
                            resolve(true) // 继续上传
                        })
                        .catch(function (error) {
                            this.$message.error('验签错误')
                            reject(new Error(false)) // 停止上传
                        })
                        .finally(() => {
                        });
                })
            },
            // 上传成功后执行
            uploadSucccess(response, file, fileList) {
            }
        }
    }
</script>

---

总结

注意复杂一点的上传多用 promise 和 await、async，这里不方便把全部的代码附上，就简单的给个上传的方式