UI组件--element-ui--Upload多组件自定义上传

需求: 提交详细信息的表单, 并上传对应图片(如下图), 后台接口要求表单数据和图片需要一次上传完成..

分析: 实际上, 每个element-ui Upload组件都应发送一次请求, 很明显不符合我们的要求, 于是,我们需要自定义上传.

　　表单上传首先考虑FormData对象, 那么就需要新建一个formData并在合适的时间将表单数据添加到formData中.

　　首先, 考虑将表单数据在提交的时候使用FormData.append()放到FormData对象中, 文件/图片在change的时候放入到FormData对象中.

　　使用append方法会有个问题, 如果上传不成功, 当你再次在当前页面提交, 你会发现表单数据重新添加了一遍, 那是因为FormData中key相同并不会覆盖掉之前的.

　　所以这里考虑用FormData.set(), 如果FormData不存在这个key, 则新建一条新数据, 如果存在, 则修改此条数据.

　　定义表单数据:

    data() {
      return {
        checkForm: {
          customerName: '',
          phone: '',
          socialSecurityNO: ''
        },
        formData: new FormData(), // 用来上传的表单

        // 用来显示的图片
        cardFrontImageUrl: '',
        cardBackImageUrl: ''

        // 用来回传的图片
        cardFrontUrl: '',
        cardBackUrl: ''
      }
    },

上传

    methods: {
     // 选择图片上传, 添加到formData中
      cardFrontOnChange (file, fileList) {
        if (fileList.length > 0) {
          this.formData.set('cardFront', file.raw);
        }
        this.cardFrontImageUrl = URL.createObjectURL(file.raw);
      },
       
      cardBackOnChange (file, fileList) {
        if (fileList.length > 0) {
          this.formData.set('cardBack', file.raw);
        }
        this.cardBackImageUrl = URL.createObjectURL(file.raw);
      },

     //   提交所有信息时, 将数据添加到formData中
    submit () {
        for (let key in this.checkForm) {
          if (this.checkForm[key]!=='') {
            this.formData.set(key, this.checkForm[key]);
          }
        }
        // api.submitInfo()是封装好的上传方法
        api.submitInfo(this.formData).then(res=> {
          if (res.code === 0) {
            // 成功后处理
          } else {
            // 失败后处理
          }
        })
      }
    }

如果后台接口设计的是上传的图片不用区分key, 那么选择图片添加到FormData中时, 只能用append方法, set将会覆盖前面的, 根据实际需求选择合适的方法就可以了.

UI组件--element-ui--Upload多组件自定义上传

猜你喜欢