详解vue实现文件导入导出（前端部分）

首先，后端要先提供文件上传的接口 importData、文件导出的接口 exportData，我就不提供这一部分代码了。

因为你要导出的文件应该是数据库存在的（页面中的），所以呢，具体的导出就交给后端去实现，我们前端只要直接调用那个接口，不需要写axios：

<a href="http://localhost/admin/cmn/dict/exportData" target="_blank">
          <el-button type="primary" icon="el-icon-upload2">导出</el-button>
</a>

其中，<a>里的href要改成你自己后端提供的接口连接。

用户点击导出，即交后端去执行。

导入麻烦一点，需要设置一个弹窗，用户点击导入，弹窗出现，在该弹窗中，用户点击文件上传，然后选择文件。这部分里前端主要是提供一个“平台”让用户选择文件，然后文件传到后端，后端接收文件，并解析，将它存到数据库。

要注意的一点是，上传的文件可能是有固定格式的（表头），这个是在后端设定好了的，所以如果你上传的文件格式不对可能会引起报错。

首先，我们写一个导入按钮，然后给他添加点击事件importData()：

<el-button type="primary" icon="el-icon-download" @click="importData()">导入</el-button>

然后在<script>中添加方法：

importData() {
      console.log('导入...')
      this.dialogImportVisible = true
},

写一个弹窗：

<el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
      <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
          <el-upload
            :multiple="false"
            :on-success="onUploadSuccess"
            :action="'http://localhost/admin/cmn/dict/importData'"
            class="upload-demo"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls文件,且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">取消</el-button>
      </div>
</el-dialog>

data中添加：

dialogImportVisible: false

注意到:action里的链接要替换成你的后端接口。

最后在<script>中添加方法，当成功上传后关闭弹窗：

onUploadSuccess(response, file) {
      this.$message.info('上传成功')
      this.dialogImportVisible = false
      // 此处可以再添加方法，使导入的数据渲染到页面中，那就需要后端的接口实现。
}

详解vue实现文件导入导出（前端部分）

猜你喜欢