使用场景

   修改个人信息中的头像；

  上传单张图片；

图例

使用方法

   cnpm install rview-c --save

使用组件

template

<UploadAvatar
          ref="uploadAvatar"
          :format="format"
          :maxSize="maxSize"
          :TenantId="TenantId"
          :idsList="idsList"
          :uploadUrl="uploadUrl"
          :isView="disabled"
          @handle-save="handleSave"
          :FileUploadFun="FileUpload"
          :DeleteUploadFun="DeleteUpload"
          :previewUploadFun="previewUpload"
        ></UploadAvatar>

data

format: ["jpg", "jpeg", "png"],//文件格式
      maxSize: 10240,//文件大小
      TenantId: "0fd2d661-c662-4442-9ec2-491b84a0a237",//租户Id
      idsList: [],//附件idList
      uploadUrl:
        "http://192.168.199.40:8014/api/services/File/FileDo/UploadFiles_Form",//上传Url
      addOrEdit: "InsertData",
      moduleInfo:{},
      fileInfo:{},
      isView:false,//附件是否查看

computed

computed: {
    /**
     * 文件上传请求
     */
    FileUpload() {
      return this.$api.Upload.FileUpload;
    },
    /**
     * 删除文件请求
     */
    DeleteUpload() {
      return this.$api.Upload.DeleteUploadPortrait;
    },
    /**
     * 查看文件请求
     */
    previewUpload() {
      return this.$api.Upload.FilePreview;
    }
  },

methods

//点击保存经过一系列的操作后会调到这个方法
handleSave(res) {
      console.log("附件上传接口返回的数据是", res);
      this.fileInfo=res.data;
      this.businessFun();
    },

saveFun(interfaceParam) {
      this.addOrEdit = interfaceParam;
      let valid = this.$refs.formValidate.validate();
      // 判断验证字段是否都已填写
      if (valid) {
      //---------------关键代码--------------
        /**
         * 是否需要调用上传接口，如果不调用拿原始数据调用业务接口即可
         */
        if (this.$refs.uploadAvatar.isUploadFlag) {
          this.$refs.uploadAvatar.uploadFun();
        } else {
          this.businessFun();
        }
      } else {
        this.$Message.error("表单验证失败!");
      }
    },

cancleFun() {
      this.$emit("RefreshParent");
      this.$refs.uploadAvatar.resetFun();//点击取消时，重置附件
    },


async businessFun() {
      // 新增/修改列表数据
      let res = await this.$api.Military[this.addOrEdit](this.innerInfo);
      if (res.data.success) {
      //-----------关键代码-----------
        if(this.fileInfo.files.length>0){
          let param=[];
          let paramsRelation = {
            moduleRowGuid: this.moduleInfo.moduleRowGuid,
            typeRowGuid: this.moduleInfo.typeRowGuid,
            tableRowGuid: res.data.result.id,
            docCenterRowGuid: this.fileInfo.files[0].id,
            sort: 0,
            tenantId: this.$config.TenantId
          };
          param.push(paramsRelation);
          let resRelation = await this.$api.AttachmentRelation.CreateRelationInfo(param);
          if(resRelation.data.success){
            this.$Message.success("头上提交成功!");
          }
        }else{
          this.$Message.error("头像提交失败!");
        }
        this.$Message.success("保存提交成功!");
        //调用父级界面关闭弹框、刷新列表界面
        this.$emit("RefreshParent");
        this.$refs.uploadAvatar.resetFun();
      }
    }

API

props

methods

computed

支持类型

jpg,jpeg,png,jfif,gif