zoukankan      html  css  js  c++  java
  • 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)
              })   
            }
          }
    
  • 相关阅读:
    存储过程
    sdsdsd
    sdsdd
    sdsd
    sdasd
    mysql触发
    c#连接mysql答题步骤
    c#mysql数据库
    nginx
    linux如何查看端口被何进程占用
  • 原文地址:https://www.cnblogs.com/yangAL/p/8809054.html
Copyright © 2011-2022 走看看