使用el-upload进行服务端直传时出现错误

简介: 项目场景:使用el-upload标签获取Java服务端签名直传

项目场景:


使用el-upload标签获取Java服务端签名直传


问题描述


第一次发送给oss的请求不会携带上数据而第二次就会携带上一次的数据

<el-upload
      class="avatar-uploader"
       action="#
      :data="policyObj"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
       :before-upload="beforeUpload">
  <img v-if="dataForm.coverUrl" :src="dataForm.coverUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
beforeUpload(file) {
        console.log("beforeUpload")
        this.$http({
              url: this.$http.adornUrl(`/third/oss/policy`),
              method: 'post',
              params: this.$http.adornParams()
            }).then(({data}) => {
              console.log(data)
              if (data && data.code === 0) {
                this.policyObj.policy = data.data.policy
                this.policyObj.signature = data.data.signature
                this.policyObj.ossaccessKeyId = data.data.accessId
                this.policyObj.dir = data.data.dir
                this.policyObj.host = data.data.host
                this.policyObj.key = data.data.host+'/'+data.data.dir+this.getUUID()+file.name
                console.log(this.policyObj)
              }
            })
    },

00069a7cbcc74c4199995330b4068c62.pngf49e873d4f8d48f5a6f36daf6dc76155.png

第二次请求

ab72b36f8c8549f29f2bd9ff14080bbe.png


原因分析:



我也不清楚呜呜呜,我不是很懂前端来个前端大佬讲讲


解决方案:


使用Promise就可以成功实现

     beforeUpload(file) {
        console.log("beforeUpload")
        return new Promise((resolve,reject)=>{
          this.$http({
            url: this.$http.adornUrl(`/third/oss/policy`),
            method: "get",
            params: this.$http.adornParams({})
          }).then(({data})=>{
            this.policyObj.policy = data.data.policy
            this.policyObj.signature = data.data.signature
            this.policyObj.ossaccessKeyId = data.data.accessId
            this.policyObj.dir = data.data.dir
            this.policyObj.host = data.data.host
            this.policyObj.key = data.data.host+'/'+data.data.dir+this.getUUID()+file.name
            resolve(true)
          }).catch(err=>{
            reject(false)
          })
        })
    }


相关文章
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
643 0
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
497 0
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3711 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
前端开发 JavaScript 应用服务中间件
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
|
开发框架 .NET
ueditor上传大容量视频报http请求错误的解决方法
故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报“http请求错误”的解决方法详解; 原因分析: 目前很多CMS整合了百度的ueditor编辑器,但是上传稍微大一点的文件就会报错, 解决方案 1:修改相对应的ueditor\asp\config.
3055 0
文件上传 图片上传 客户端图片上传到服务器
文件上传 图片上传 客户端图片上传到服务器
|
3月前
Ueditor——请求后台配置项http错误,上传功能将不能正常使用
Ueditor——请求后台配置项http错误,上传功能将不能正常使用
51 0
Ueditor——请求后台配置项http错误,上传功能将不能正常使用
|
4月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
1228 0
|
6月前
uni-app 113上传文件请求封装
uni-app 113上传文件请求封装
34 1
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
392 0