elementui 文件下载-vue+elementui实现文件上传（el-upload）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

以上传excel文件为例（先看疗效）

点击按钮弹出框，选择需要上传的文件，并将文件发送到前端

代码实现-HTML部分

使用elementUi的组件el-upload，其中action为必填参数，即上传文件的地址。 如果没有这个地址，则设置为空或者#； 自动上传选择文件后是否立即上传，默认为true； on-change文件状态发生变化时的钩子，添加文件、上传成功、上传失败时都会调用，方法写在这里； show-file-list是否显示上传文件列表，默认为true

<el-upload
            ref="upload"
            class="upload-demo"
            action="#"  
            accept=".xlsx, .xls"
            :auto-upload="false"
            :on-change="uploadFile"
            :show-file-list="false"
          >
          <el-button type="warning">导入商品</el-button>
        </el-upload>

代码实现-JS部分

使用FormData传输文件。 FormData提供了表示表单数据的通配符对的构造方法，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

uploadFile (item) {
        let formData = new FormData()
        let file = item.raw
        formData.append('file', file)
        this.$http({
          url: ' ', //后端提供的接口
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({data}) => {
          this.$alert(data.data)
        })
    }

获取文件数据 item.rawelementui 文件下载，将其添加到 FormData - 调用append()

注意：headers请求要写入的标头elementui 文件下载，HTTP content-type，用于定义网络文件的类型和网页的编码，并决定浏览器将如何以及采用什么编码来读取这个文件。 Content-Type 标头告诉客户端实际返回的内容的内容类型。 在此示例中使用 multipart/form-data

常见的媒体格式类型如下：

以应用程序开头的媒体格式类型：

上传文件时使用另一种常见的媒体格式：