老版本写法
<!-- 文件上传 -->
<form
id='uploadForm'
method='POST'
style="display:none;"
enctype="multipart/form-data"
action='/api/v1/monitor/authentication-setting/upload'
>
<input
type='file'
name='upload'
id='uploadInput'
accept=".ipa"
:disabled="isEdit"
/>
</form>
uploadFile() {
let input = document.getElementById("uploadInput");
input.click();
const _self = this;
input.onchange = async function () {
let formData = new FormData();
const file = this.files[0];
if (file) {
formData.append("upload", file);
setLoading(_self.$refs.createDialog.$el.childNodes[0]);
const fileRes = await uploadFile(formData);
closeLoading(_self.$refs.createDialog.$el.childNodes[0]);
_self.uploadFileObj = fileRes.data;
_self.filePath = fileRes.data.filePath;
_self.getAppItem();
}
};
},
存在上传后,点击取消上传,再次重新上传 ,监听不到文件上传的问题,二次上传无效
修改成在 uploadFile 方法里创建DOM 设置input的属性,然后执行完后,remove调input DOM结构,来实现一个文件上传模块
<div @click='uploadFile' > </div>
uploadFile() {
let input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("name", "upload");
input.setAttribute("accept", ".ipa");
const _self = this;
input.onchange = async function () {
let formData = new FormData();
const file = this.files[0];
if (file) {
formData.append("upload", file);
setLoading(_self.$refs.createDialog.$el.childNodes[0]);
const fileRes = await uploadFile(formData);
closeLoading(_self.$refs.createDialog.$el.childNodes[0]);
_self.uploadFileObj = fileRes.data;
_self.filePath = fileRes.data.filePath;
_self.getAppItem();
input.remove();
}
};
input.click();
},