input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的。

解释如下:
input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可。

event.target.value='';
getInputFile(event) {
        if(event.target.files.length){
          let formData = new FormData()
          formData.append("file", event.target.files[0])
          this.$http({
            method: 'post',
            async: true,
            crossDomain: true,
            url:`${this.api.uploadData.uploadUrl}`,
            headers: {
              "Cache-Control": "no-cache",
              "Postman-Token": "19899c72-855a-49a1-494b-fe42b45d5d5e"
            },
            processData: false,
            contentType: false,
            cors: {
            //all requests are expected to be cross-domain requests
              expected: true,
              //if you want cookies to be sent along with the request
              sendCredentials: true
            },
            mimeType: "multipart/form-data",
            data:formData
          }).then(res => {
            if(!res.data.data.errTotal){
              this.curMask = true
              this.uploadSuccess = true 
              this.uploadFail = false
            }else{
              this.curMask = true
              this.uploadFail = true
              this.uploadSuccess = false 
              this.errNumber = res.data.data.errTotal
              this.errUrl = res.data.data.errUrl
            }
            event.target.value=''
          }).catch(e => {
            event.target.value=''
            this.$alert(e.response.data.msg)
          })   
        }
      }
原文地址:https://www.cnblogs.com/yangAL/p/8809054.html