input文件上传

最新推荐文章于 2024-07-24 14:03:49 发布

Eli-sun

最新推荐文章于 2024-07-24 14:03:49 发布

阅读量920

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/vfjcgg/article/details/124349503

版权

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

这段内容描述了一个Vue应用中导入Excel文件的功能实现。通过点击导入按钮，选择xlsx格式的文件，然后使用handleFileUpload方法处理文件上传。文件被添加到FormData对象中并发送到importZbk接口进行处理。当导入完成后，文件输入框的值被清空，以防止重复导入相同文件的问题。

摘要由CSDN通过智能技术生成

	<div class="uploadexcel">
        <label for="fileInput">
          <span class="importBtn">导入</span>
          <!-- <el-button type="primary">上传文件</el-button> -->
        </label>
        <input
          v-show="false"
          type="file"
          id="fileInput"
          @change="handleFileUpload"
          accept=".xlsx"
          name="file"
          ref="file"
        />
    </div>
//script
// 导入
const handleFileUpload = (e) => {
  console.log('导入res', e);
  // console.log('导入file', file);
  let file = e.target.files;
  let form = new FormData()
  form.append('xlsFile', e.target.files[0])
  console.log('99999-----', form.get("xlsFile"));
  importZbk(form).then(res => {
    console.log(res);
    e.target.value = ' ' // 当导入的文件相同的时候会出现第二次无法导入的问题
  })
}