vue excel文件上传

3,923 阅读1分钟

不能老盯着手机屏幕,要不时地抬起头,看看老板的位置。

  1. 技术背景:vue上传excel文件给后端时选择了fromdata,
  2. 安装axios:npm i axios -D
  3. FormData:FormData类型其实是在XMLHttpRequest2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。
  • 1、创建一个空对象实例:let fileFormData = new FormData();
  • 2、添加数据:我们可以通过append(key,value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾fileFormData.append('File',this.initFile);
  1. 设置Content-Type:let requestConfig = {headers: {"Content-Type": "multipart/form-data"}};
  2. 创建axios实例并添加:withCredentials:true表示跨域请求时是否需要使用凭证. 默认为false
  3. 发送axios请求:参数(后台接口地址,fileFormData,requestConfig)

完整代码

//点击发送事件
preserveCompanyName() {
      import axios from 'axios' //先下载axios (npm i axios -D)!!!(不在这里写,然后在export default 外引入)
      let fileFormData = new FormData();
      fileFormData.append('File',this.initFile);
      let requestConfig = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };

      const instance = axios.create({
        withCredentials: true
      })

      instance.post('http://192.168.1.48:8000/basicTable/upload_file',fileFormData,requestConfig ).then(res=>{
        this.$message.success('上传成功!')
      })

      this.dialogVisible1 = false;
}

至此 完结!best regards!