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 给后端 保存就行

posted @   川流不息&  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示