When using the traditional input box to implement the upload function, how to verify the file format + solve the problem that the verification cannot be cleared in the form form

Use the traditional input box to realize the way of uploading files, as shown in the figure:

How to verify the file format, the code is as follows:

-------------html部分-----------
<div v-if="!readOnly" class="upload-btn" @click="chooseTrigger('upload')">添加附件</div>
<input type="file" ref="uploadInput" style="display: none" @change="uploadTrigger" />

-------------js部分-------------
/* 校验部分 */
    uploadTrigger() {
    
    
      let files = this.$refs["uploadInput"].files;
      // 限制的格式范围
      const txtname = ".zip|.rar|.html|.doc|.docx|.ppt|.wps|.pdf|.xls|.xlsx|"
      // 校验
      var extName = files[0].name.substring(files[0].name.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
      // 判断
      if(txtname.indexOf(extName+"|") == -1) {
    
    
        this.$Message.error('请上传正确的文件格式！如：' + txtname);
        return
      }
    },

Replenish:

How to delete the uploaded file when type=file: this.$refs.[xxx].value = nullorthis.$refs.xxx = null

--------------------Update-----2023.08.01------------------ -------------------------------------------------- -------------------------------------------------- -----------------

Solve the problem that the input box is uploaded and written in the form, and the verification prompt cannot be cleared

When changing the code of the previous project, I found that the upload was realized through the type=file of the input, and I also encountered problems when verifying the form, as shown in the figure

Because it is written in the form, the rules verification is performed. However, even if the file is uploaded after the verification is triggered, the verification cannot disappear.

So I referred to the iview source code and printed this.$refs.productData.fields

Print it again, I want to clear the field prop of the bound input of the verification

const fields = this.$refs.productData.fields
 fields.forEach((item) => {
    
    
    if (item.prop === 'fileNote') {
    
    
       console.log(item)
      }
 })

The printed results obtained are as shown in the figure below:

Several important APIs were found, which are the ones framed in the above figure

Realization of iview form clearing verification status

In fact, it is to modify the two attribute values ​​​​of formItem,
validateDisabled whether to verify
the validateState display status (the value here is 'error' when the verification is wrong)
validateMessage error prompt text
(ps: you can print Kangkang yourself, my screenshot is not all apis printed)

Therefore, if you want to clear the verification, you need to call the resetField() method of the field, or just change the above attributes to the correct one. I use the first method here.

Full code:

 <Form ref="productData" :model="productData" :label-width="170" label-colon>
 .......
	<FormItem label="上传" prop="fileNote" :rules="ruleValidate['fileNote']">
	<Button class="file-btn">
	    <span class="file-real">选择文件</span>
	    <input placeholder="请选择" type="file" @change="handleKeyUpload"  ref="file" id="fileId" />
	  </Button>
	    <span>{
    
    {
    
    keyFileUrl}}</span>
	</FormItem>
......
</Form>

js部分
    handleKeyUpload (e) {
    
    
      // 上传文件后清除校验提示（重点就是这里）
      const fields = this.$refs.productData.fields
      fields.forEach((item) => {
    
    
        if (item.prop === 'fileNote') {
    
    
          item.resetField() // 重点！！！！！
        }
      })
      // 获取用户选择的文件
      const files = this.$refs.file.files
      // 限制的格式范围
      // const txtname = '.png,.exe,'
      // // 校验
      // var extName = files[0].name.substring(files[0].name.lastIndexOf('.')).toLowerCase() // （把路径中的所有字母全部转换为小写）
      // // 判断
      // if (txtname.indexOf(extName + ',') === -1) {
    
    
      //   this.$Message.error('请上传正确的文件格式！如：' + txtname)
      //   return
      // }
      this.keyFileUrl = e.target.value
      this.getBase64File(files[0])
      return false
    },
    // 把文件转化为base64
    getBase64File (file) {
    
    
      const reader = new FileReader()
      reader.readAsDataURL(file)
      this.productData.fileNote = null
      // 注意此方法是异步的 若要卸载外面需要将其改写为promise
      reader.onload = (e) => {
    
    
        this.productData.fileNote = e.target.result // 将base64编码赋值给对象
        this.productData.fileNote = encodeURIComponent(this.productData.fileNote.substring(this.productData.fileNote.indexOf(',') + 1))
      }
    },