el-upload上传改为 oss直传全步骤

signature 后端接口的oss基本参数

安装ali-oss包，并记录到package.json文件- - -开发环境（devDependencies）和生产环境（dependencies）都需要安装这个依赖包 （–save -dev的表示只有开发环境安装依赖包）

安装完成后，script中导入ali-oss包- - -“import OSS from ‘ali-oss’”

安装并引入之后进行改装组件
?

<template>
  <div class="component-upload-image">
    <el-upload
      name="file"
      :action="baseUrl"
      :list-type="type"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :limit="limit"
      :data="dataObj"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      ref="imageUpload"
      :on-remove="handleDelete"
      :show-file-list="true"
      :headers="headers"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :class="{hide: this.fileList.length >= this.limit}"
    >
    <i class="el-icon-plus" v-if="type"></i>
    <el-button size="small" type="primary"  v-else>点击上传</el-button>
    </el-upload>
    <!-- 上传提示 -->
    <div class="el-upload__tip" slot="tip" v-if="showTip">
      <template v-if="fileSize">
        <!-- 建议尺寸 -->
        <!-- <b style="color: #f56c6c">{{fileDim}}</b> -->
        <!-- 像素  -->
        大小不超过 
        <b style="color: #f56c6c">{{ signatureData.size }}MB</b> 
      </template>的文件
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
  </div>
</template>

只要关心两点就行（?:action="baseUrl"） 绑定值 绑定你最终要上传到的oss地址? 一般是请求后端接口返回给的数据对象中包含，（:data="dataObj"） 上传oss要携带身份参数及文件名称

  // 上传前loading加载
    async handleBeforeUpload(file) {
      let isImg = false;
      if (this.fileType.length) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
          console.log(file.name);
        }

        isImg = this.fileType.some(type => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        console.log(isImg);
      } else {
        isImg = file.type.indexOf("image") > -1;
      }

      if (!isImg) {
        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
        return false;
      }
      if (this.signatureData.size) {
        const isLt = file.size / 1024 / 1024 < this.signatureData.size;
        if (!isLt) {
          this.$modal.msgError(`文件大小不能超过 ${this.signatureData.size} MB!`);
          return false;
        }
      }
        this.baseUrl=this.signatureData.host
        this.dataObj= {
          key : this.signatureData.dir+file.name,
          policy: this.signatureData.policy,
          OSSAccessKeyId:this.signatureData.access_id, 
          success_action_status : '200', //让服务端返回200,不然，默认会返回204
          // callback : "callbackbody",
          signature: this.signatureData.signature,
    };
      // //获取OSS签名
      this.$modal.loading("正在上传，请稍候...");
      this.number++;
    },

? this.baseUrl=this.signatureData.host

? ? ? ? this.dataObj= {

? ? ? ? ? key : this.signatureData.dir+file.name,

? ? ? ? ? policy: this.signatureData.policy,

? ? ? ? ? OSSAccessKeyId:this.signatureData.access_id,

? ? ? ? ? success_action_status : '200', //让服务端返回200,不然，默认会返回204

? ? ? ? ? // callback : "callbackbody",

? ? ? ? ? signature: this.signatureData.signature,

? ? };
以上两段代码是上传时需要的地址和参数 这里的key要进行拼接是?要上传到的oss地址
this.signatureData这个对象? 我是当作参数在父组件传进来的，

以上就是前端改造全部过程? 细节可参考上传组件，

不喜勿喷哈