分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 01:49责任编辑:彭小芳关键词:暂无标签

不要采用删除当前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)
})
}
}

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

原文地址:https://www.cnblogs.com/yangAL/p/8809054.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved