美文网首页
上传文件上传完成,提示不消失,用onchange事件,上传完详情

上传文件上传完成,提示不消失,用onchange事件,上传完详情

作者: 流泪手心_521 | 来源:发表于2020-09-22 22:32 被阅读0次

1.结构

<el-form-item label="附件" prop="filePath" class="item-form-3" v-if="!isDetailPage" >
          <el-upload
                     action=""
                     :file-list='attchList'//赋值用的
                     :http-request="uploadImages"
                     :before-upload="beforeAvatarUpload"
                     show-file-list
                     multiple
                     :on-change="handleChange"//消失的事件
                     accept=".doc,.docx,.ppt,.pdf,.rar,.zip,.JPG,.JPEG,.PNG,.gif">
            <el-button type="primary">上传附件</el-button>
          </el-upload>

2.js

      //上传文件校验
      let filePath=(rule,value,callback)=>{
        if(this.dialogForm.filePath.length===0){
          return callback(new Error('请上传附件!'))
        }else{
          callback()
        }
      };


  //校验
        dialogFormRules: {
            filePath: [
                    {required: true, validator:filePath,  trigger:  ['blur', 'change']}
            ]
         }


  //上传
      beforeAvatarUpload(file) {
        if (file.size > 100 * 1024 * 1024) {
          this.$message.error('文件不能超过100M');
          return false
        }
      },
      uploadImages(val) {
        let formData = new FormData()
        //key:file与后台对应
        formData.append('file', val.file)
        http.post(
                '/file/upload',
                formData,
                {
                  headers: {'Content-Type': 'multipart/form-data'}
                }
        ).then(res => {
          if (res.status==0) {
            if(res.data.filePath){
              this.dialogForm.filePath.push(res.data.filePath);//上传文件路径
            }
            //判断资料名称是否有值,如果没有值,则把上次附件名称给资料名称赋值
            if(!this.dialogForm.materialName){
              this.dialogForm.materialName=res.data.message;
            }
          } else {
            this.$message.error(res.message)
          }
        }).catch((error) => {
          console.log(error)
        });
      },
      //上传完成清空验证提示
      handleChange(file,fileList){
        if(fileList){
          this.$refs['dialogForm'].clearValidate()//一定要清空
        }
      },

    赋值
    //详情
      details(id){
        console.log(id,'详情');
        materialLibApi.getMaterialLibDetail(id).then(res => {
          if(res.status==0){
            this.dialogForm.materialName=res.data.materialName;//资料名称
            this.dialogForm.sectionCode=res.data.sectionCode;//板块code
            this.dialogForm.ifPublic=res.data.ifPublic;//默认非公开
            this.dialogForm.fileType=res.data.fileType;//默认软件
            //上传赋值
            this.attchList = res.data? [{
              name: res.data.materialName,
              url: res.data.filePath
            }] : [];
            this.dialogForm.fileFormat=res.data.fileFormat;
            this.dialogForm.columnCode=res.data.columnCode;
            this.dialogForm.id=id;
          }else{
            this.$message.error(res.message)
          }
        }) .catch((error) => {
          console.log(`/lib/query/detail?id=${id}详情`, error)
        });
      },

相关文章

网友评论

      本文标题:上传文件上传完成,提示不消失,用onchange事件,上传完详情

      本文链接:https://www.haomeiwen.com/subject/eqnvyktx.html