美文网首页
el-upload 直传 oss

el-upload 直传 oss

作者: 文芬 | 来源:发表于2021-03-18 17:37 被阅读0次
<el-upload
      id="uploadApp"
      class="upload"
      ref="upload"
      :action="oss.host"
      :data="oss"
      :multiple="false"
      :limit="1"
      :file-list="fileList"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
      :auto-upload="false"
    >
      <el-button slot="trigger"  type="primary">选择APP</el-button>
      <el-button style="margin-left: 10px;" :loading="isUpload" type="success" @click="uploadApp">上传到服务器</el-button>
    </el-upload>
export default {
    data: function() {
      return {
        fileList: [],
        isUpload: false,
        oss: {
          key: "",
          policy: "",
          Signature: "",
          host: "",
          success_action_status: 200,
          callback: ""
        },
        fileUnikey: ''
      }
    },
    methods: {
       // 凭证
      getPolicy(){
        queryPolicy().then((response) => {
          if(response.data.success){
            let result = response.data.data
            let { dir, host, expire, policy, fileName, signature, callback, accessid } = result;

            this.oss.key = dir + fileName
            this.oss.dir = dir
            this.oss.fileName = fileName
            this.oss.name = fileName
            this.oss.expire = expire;
            this.oss.host = host;
            this.oss.policy = policy;
            this.oss.Signature = signature;
            this.oss.callback = callback;
            this.oss.OSSAccessKeyId = accessid;
            this.fileUnikey = result.unikey
          }else{
            this.$message.error(response.data.message)
          }
        }).catch(error => {
          console.error(error)
        })
      },
      uploadApp() {
        const form = this.$refs.form
        form.validate(isValid => {
          if (isValid && this.fileList.length > 0) {
            this.isUpload = true
            const upload = this.$refs.upload
            upload.submit()
          }
        })
      },
    }
}

相关文章

网友评论

      本文标题:el-upload 直传 oss

      本文链接:https://www.haomeiwen.com/subject/qxjpcltx.html