oss 前端授权上传 elementui

oss 前端授权上传 elementui

后端

<el-form-item :label="$t('file.up')" prop="url">
           <el-upload ref="fileUpload"
              class="upload-demo"
              action=""
              :http-request="uploadFile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
               >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
                    

接口获取签名信息

uploadFile(param){
      let file = param.file
      console.log(file)
      getUploadToken(null).then(data => {
        let ossUrl = data.host
        let accessUrl = data.dir + file.name;
        this.form.fileName = file.name;
        this.form.fileType = file.type;
        this.form.fileSize = file.size;
        console.log(accessUrl)
        let sendData=new FormData()
        sendData.append('OSSAccessKeyId',data.accessid)
        sendData.append('policy',data.policy)
        sendData.append('signature',data.signature)
        sendData.append('keys',data.dir)
        sendData.append('key',accessUrl);
        sendData.append('success_action_status',200)
        //sendData.append( 'type','image/jpeg')
        sendData.append('file',file)
        axios.post(ossUrl,sendData).then(()=>{
          this.form.url = ossUrl +'/'+ accessUrl;
        })
      })
    }

提交 url 给后端 保存就行