element ui 上传到oss服务器

参考文档：https://help.aliyun.com/document_detail/64047.html#title-vbx-3di-xnh

安装ali-oss

npm install --save ali-oss

阿里云上传需要的参数

const client = new OSS({
    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'yourRegion',
    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
    accessKeyId: 'yourAccessKeyId',
    accessKeySecret: 'yourAccessKeySecret',
    // 从STS服务获取的安全令牌（SecurityToken）。
    stsToken: 'yourSecurityToken',
    // 填写Bucket名称。
    bucket: 'examplebucket'
  });

新建oss.client.js

import OSS from 'ali-oss';
export default (config) => {
    return new OSS(config);
};

上传组件upload.vue

<template>
  <el-upload
    ref="uploadFile"
    class="upload"
    action="123"
    :multiple="true"
    :limit="4"
    :on-exceed="exceed"
    :show-file-list="true"
    :file-list="fileArrList"
    accept="video/mp4,.txt,.mb"
    :http-request="uploadHttp"
    :on-remove="handleRemove"
  >
    <el-button size="small" type="primary" icon="el-icon-upload" round
      >点击上传</el-button
    >
    <div class="el-upload__tip" slot="tip">
      可多个上传mb/mp4/txt文件，一次最多可上传2个
    </div>
  </el-upload>

</template>
<script type="text/ecmascript-6">
import ossClient from './oss.client';
import { getToken } from '@/utils/auth'
import { OssSts } from '@/api/user'
export default {
    name: 'Upload',
    data () {
        return {
            tempCheckpoint:'',
            uploadConf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null,
                path:null,
                Expiration:null
            }
        };
    },
    props:{
        fileArrList:{
            type:Array,
            default:[]
        },
        progressNum:{
           type:Number,
            default:0
        }
    },
    created(){
        this.init()
    },
    methods: {
        async init () {
            //获取阿里云token  这里是后台返回来的数据
            OssSts({token:getToken()}).then(aliyun =>{
                if(aliyun.code === 200){
                    const {region, AccessKeyId, AccessKeySecret, bucket, SecurityToken,Expiration ,path} = {...aliyun.data,...aliyun.data.sts}
                    this.uploadConf.region = region;
                    this.uploadConf.accessKeyId = AccessKeyId;
                    this.uploadConf.accessKeySecret = AccessKeySecret;
                    this.uploadConf.bucket = bucket;
                    this.uploadConf.stsToken = SecurityToken;
                    this.uploadConf.Expiration = Expiration;
                    this.uploadConf.path = path;
                }
            })
        },
        exceed(files, fileList){
          this.$message.error('最多上传2个文件哦！')
        },
       
        /**
         * 阿里云OSS上传
         */
        uploadHttp({ file }) {
            let _this = this;
            if(_this.fileArrList.find(item=>item.name===file.name)){
                  let uid = file.uid
                   let idx = _this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
                    _this.fileArrList.splice(idx, 1)
                    _this.$message.error("您选择重复的文件")
            }else{
             const fileName = `${this.uploadConf.path}/${getToken()}/${file.name}`;  
            ossClient(this.uploadConf).multipartUpload(fileName,file,{
                    progress: function (p, checkpoint) {
                      _this.tempCheckpoint = checkpoint;
                      _this.$emit("proGress",Math.round(p * 100))
                    },
                    parallel: 4,
                    // 设置分片大小。默认值为1 MB，最小值为100 KB。
                    partSize: 1024 * 1024,
                    meta: { year: 2020, people: 'test' },
                    mime: 'text/plain'
                 }).then(({res, url, name}) => {
                 if (res && res.status == 200) {
                      let obj = {name:file.name,url:res.requestUrls[0]}
                      _this.fileArrList.push(obj)
                    console.log(`阿里云OSS上传成功`,res, url, name);
                }
            }).catch((err) => {
            	 //没上传成功删掉上传列表的文件
                  let uid = file.uid
                 let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
                 this.$refs.uploadFile.uploadFiles.splice(idx, 1)
                  _this.$message.error("上传错误，请重新上传")
                console.log(`阿里云OSS上传失败`, err);
            });
          }  
        },
		/**
		 * 移除图片
		 */
        handleRemove (file, fileList) {
            let uid = file.uid
           let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
           this.fileArrList.splice(idx, 1)
            console.log(`移除图片回调`, fileList);
        },
    }
};
</script>