Element ui upload上传图片流程(在then()中嵌套异步可行?)

  • Z时代
  • 2024-02-07
  • 分类：IT

如下图,upload的表单提交流程原理一般是怎样的
Element ui upload上传图片流程(在then()中嵌套异步可行?)

1.upload的action接口URL与提交表单的接口URL什么关系?
2.upload自动上传与手动上传的区别?
3.如果将upload设置为手动,在提交表单时,将提交返回的参数advertiseId设置为upload参数的bizId,如何实现?

<el-upload
 ref="upload"
 class="uploadFiles"
 :action="uploadUrl"
 list-type="picture-card"
 :show-file-list="false"
 :data="uploadParams"
 :file-list="fileList"
 :on-preview="handlePictureCardPreview"
 :on-progress="uploadProcess"
 :on-success="handleSuccess"
 :before-upload="beforeAvatarUpload"
 :auto-upload="false"
 :on-change="change"
 :on-remove="handleRemove"
 :limit="1"
/>
data() {
  return {
    uploadUrl: '',
    // 省略
  }
}
computed: {
    uploadParams() {
      return {
        bizType: 'AC',
        sysModule: 'RO',
        bizId: this.overId
      }
    }
  }
methods: {
    // 提交
    async save() {
      const params = {
          Position: this.Position,
          Url: this.url,
          isOpen: this.isOpen
      }
      this.$http.post(this.$url.addList, params).then(res => {
        // #### 此处需要 异步 设置 upload 的 bizId ?
        this.advertiseId = res.data.ssmhAdvertise[0].advertiseId
        this.$message.success('保存成功!')
      }).catch(_ => {
        this.$message.error('保存失败!')
      }).finally(_ => {
        this.$parent.prop.drawer = false
      })
    }
 }

回答：

  1. upload的action接口URL与提交表单的接口URL什么关系?
    当然是一摸一样了呀。
  2. upload自动上传与手动上传的区别?
    自动上传就是选择文件之后，会自动调用提交。手动上传就是需要你去用js调用上传动作。
  3. 如果将upload设置为手动,在提交表单时,将提交返回的参数advertiseId设置为upload参数的bizId,如何实现?
    响应的回调里面处理即可

以上是 Element ui upload上传图片流程(在then()中嵌套异步可行?) 的全部内容， 来源链接： utcz.com/p/935727.html

回到顶部