使用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)
          })
        })
    }


相关文章
|
1月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
51 0
|
5月前
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
358 0
|
7月前
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
274 0
|
8月前
|
JavaScript
VUE上传功能本地上传正常,打包上传后报错TypeError: ***.upload.addEventListener is not a function
VUE上传功能本地上传正常,打包上传后报错TypeError: ***.upload.addEventListener is not a function
248 0
|
前端开发 JavaScript 应用服务中间件
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
multer实现文件上传功能全解(form上传、fetch请求上传、多文件上传)
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3252 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
开发框架 .NET
ueditor上传大容量视频报http请求错误的解决方法
故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报“http请求错误”的解决方法详解; 原因分析: 目前很多CMS整合了百度的ueditor编辑器,但是上传稍微大一点的文件就会报错, 解决方案 1:修改相对应的ueditor\asp\config.
2970 0
|
1月前
uni-app 113上传文件请求封装
uni-app 113上传文件请求封装
8 1
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
3928 0
element-plus:el-upload上传文件只能一次,第二次失效
element-plus:el-upload上传文件只能一次,第二次失效
388 0