IView中，一个弹出层中涉及多个上传处理办法（或一个页面中，多个上传的处理办法）

傷城~ 2021-08-13 12:00 205阅读 0赞

一个页面中经常会有新增、编辑功能，新增、编辑都有上传功能，又不想每个上传功能都写一个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;
        },