前端vue +element Upload组件调用阿里云oss 上传图片视频

本文链接：https://blog.csdn.net/qq_40247562/article/details/115730698

前言：之前上传图片一般都是把file 文件直接传给后台，后台处理，然后返回URL ，阿里云oss 可以直接对接前端来传输图片，视频文件。以下为主要代码。

1) element Upload 改写如下。注意一定要用http-request 来覆盖他默认的上传方法。

<el-form-item label="头像（必填）" prop="avatarUrl">
                        <el-upload
                                class="avatar-uploader uploader-left"
                                :http-request="uploadAvatar"
                                action=""
                                :show-file-list="false"
                                :headers="uploadHeaders"
                        >
                            <img v-if="ruleForm.avatarUrl" :src="ruleForm.avatarUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

2）获取 oss token 以及一些必要参数。下面接口为后台提供，注意一定要确定数据的格式是否正确，具体可以参考官网。

getOssToken() {
                this.$api.systemUser.getOssToken().then(res => {
                    this.client = new OSS({
                        accessKeyId: res.data.accessKeyId,
                        accessKeySecret: res.data.accessKeySecret,
                        stsToken: res.data.securityToken,
                        bucket: res.data.bucket,
                        region: res.data.region
                    });
                })
            },

3）封装一个方法，向阿里云传输数据。 name 为文件的名字，采用时间戳_文件名字来命名，防止重复出现覆盖。data 就是传输给oss 的文件file

async putObject(data) {
                try {
                    const point = data.name.lastIndexOf('.');
                    let fileName = data.name.substr(0, point);
                    let timestamp = Date.parse(new Date());
                    let name = fileName + '_' + timestamp;
                    return await this.client.put(name, data);
                } catch (e) {
                    console.log(e);
                }
            },

4) 调用方法，option 为文件的参数，把里面的file 传给oss ,在成功之后会返回文件在oss 上面的路径。

 uploadAvatar(option) {
                this.putObject(option.file).then(res => {
                    this.ruleForm.avatarUrl = res.url;
                });
            },