上传文件 重置input

前端 · 2022-10-19

方法1 重置input框 直接把type改了就可以赋值了

      event.target.type = "text";
      event.target.value = "";
      event.target.type = "file";
      event.target.name = "file";

方法二

      this.$refs.fileupload.value = null;

html

<input
  type="file"
  accept=".xlsx"
  @change="upload($event, 'fileupload')"
  ref="fileupload"
  id="fileupload"
/>

js

upload(event, id) {
  var resultFile = document.getElementById(id).files[0];
  if (!resultFile) {
    return;
  }
  const action =
    process.env.VUE_APP_BASE_API + "xxx";

  let formData = new FormData();
  formData.append("file", resultFile);

  axios({
    method: "post",
    url: action,
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
      "Admin-Token": this.$store.getters.token,
    },
  })
    .then((cb) => {
      // 方法1 重置input框 直接把type改了就可以赋值了
      event.target.type = "text";
      event.target.value = "";
      event.target.type = "file";
      event.target.name = "file";
      方法二
      this.$refs.fileupload.value = null;

      let code = cb.data.code;
      let msg = cb.data.msg;
      this.$message[code == 200 ? "success" : "error"](msg);
    })
    .catch((err) => {
      console.log(err);
    });
}

方法一
方法二

Theme Jasmine by Kent Liao