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)
              })   
            }
          }
    
  • 相关阅读:
    VSCode中按ESLint规则格式化Javascript代码
    VSCode设置资源管理器字体大小
    Windows下利用安装压缩包安装MySQL
    Windows部署Apache 2.4.46及PHP 8.0.3
    npm设置国内镜像
    IDEA运行Tomcat输出信息乱码
    深入理解jvm虚拟机读书笔记-Java内存区域与内存溢出异常
    Navicat Premium
    mysql安装
    ElasticSearch 基础
  • 原文地址:https://www.cnblogs.com/yangAL/p/8809054.html
Copyright © 2011-2022 走看看