Vue文件上传、下载

大家好，又见面了，我是你们的朋友全栈君。

代码示例：文件上传到接口，对接口返回的文件进行下载。

<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
    <input type="file" @change="uploadFile($event)" accept=".sql,.excel,.txt"/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    uploadFile: function (event) {
      //将接收到的文件以表单形式post到接口
      let file = event.target.files[0];
      let formData = new FormData();
      formData.append('file', file);
      let config = {
        headers: {'Content-Type': 'multipart/form-data'},//文件上传配置
        responseType:'arraybuffer'//文件下载配置
      }
      this.$axios
          .post('/api/action/sql_to_word', formData, config)//进行了跨域代理
          .then((response => {
            //对返回的文件流进行下载
            let url = window.URL.createObjectURL(new Blob([response.data])) //创建下载链接
            let link = document.createElement('a') //创建a标签
            link.style.display = 'none'  //将a标签隐藏
            link.href = url  //给a标签添加下载链接
            link.setAttribute('download', 'abc.docx') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            document.body.appendChild(link)
            link.click()  //执行a标签
          }))
    }
  }
}
</script>