前端下载与上传文件

下载

a标签

需要注意的是，跨域下载时，这个download属性会失效，不会重命名文件

  <a href="文件地址"
    download="文件名"
    target="view_window"
  >下载</a>

表单

  <form action="文件地址">
    <input type="submit" />
  </form>

脚本下载

1、脚本生成a标签进行下载

  function downloadTow(){
    let a=document.createElement('a');
    a.href="文件地址"
    a.download="文件名"
    a.click();
  }

2、location.href

  function downloadOne(){
    location.href='文件地址'
  }

3、脚本生成表单下载

  function downloadThree(){
    let form=document.createElement('form');
    form.action="文件地址";
    let body=document.querySelector('body');
    body.append(form)
    form.submit();
  }

上传文件

上传文件用post方法，且请求头的content-type为multipart/form-data

  // 文件上传
  uploadFile(file,url){
    return new Promise((resolve,reject)=>{
      if(file){
        let formData=new FormData();
        formData.append('file',file);
        axios.post(url,formData,{
        //请求头的content
          headers:{
            'Content-Type':"multipart/form-data",
          }
        }).then(resolve).catch(reject);
      }else{
        reject(new Error('没有上传的文件！'))
      }
    })
  }