IView中,一个弹出层中涉及多个上传处理办法(或一个页面中,多个上传的处理办法)

一个页面中经常会有新增、编辑功能,新增、编辑都有上传功能,又不想每个上传功能都写一个beforeUpload方法,该如何处理,请直接看代码。如果各位有更简便的处理方法,麻烦留言告知,让我也学习学习。

<Upload
                @click.native="handlePostData('addForm', 'thumb')"
                :action="uploadUri"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg', 'jpeg', 'png']"
                :max-size="5120"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
              >
                <Button icon="ios-cloud-upload-outline" type="primary"
                  >上传背景图片</Button
                >
              </Upload>
  handlePostData(formName, propsName) {
      this.postData = {};
      this.postData[formName] = propsName;
      console.log(this.postData);
    },
    handleSuccess(res, file, value) {
      let key1 = Object.keys(this.postData)[0];
      let value1 = Object.values(this.postData)[0];
      let { data } = res;
      // this[key1][value1] = data.uri;
      if (value1 === 'details') {
        this[key1][value1] = this[key1][value1] + `<img src="${data.uri}"/>`;
      } else {
        this[key1][value1] = data.uri;
      }
    },
    handleMaxSize(file) {
      this.$Message.error(file.name + '文件太大,不能超过5M哟!');
      return false;
    },
    handleFormatError(file) {
      this.$Message.error(file.name + '格式不正确,只能上传jpeg/png格式哟!');
      return false;
    },
    handleBeforeUpload(file) {},

就是通过加一个原生事件,去修改指定表单的指定属性去处理。如果各位有更好的办法,欢迎讨论。谢谢大家!


补充一下:手动上传办法


    /***
     * @desc 手动上传设置
     */
    handleBeforeUpload(file) {
      let fileName = file.name;
      var suffix = fileName.substr(fileName.lastIndexOf('.'));
      if (suffix != '.fmu') {
        this.$Message.error('非fmu格式的文件,请重新选择!');
        return false;
      }
      this.defaultFileList.length = 0;
      this.uploadFile = file;
      this.addModelForm['FMU_file'] = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      let self = this;
      reader.onloadend = function(e) {
        file.url = reader.result;
        let fileObj = {
          name: file.name,
          url: file.url
        };
        self.defaultFileList.push(fileObj);
        self.$refs.addModelFormRef.validateField('FMU_file');

        // self.defaultFileList[0].name = file.name;
        // self.defaultFileList[0].url = file.url;
      };
      return false;
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值