vue3文件 上传；图片上传

vue3不同于vue2，都是按需引入的。可以使用import()函数来进行按需引入。

一、引入axios请求

import axios from 'axios';

二、示例代码

addFile(){
    //1.定义个formData对象
    let fd=new FormData();
    
    //2.将需要传的参数append到formData对象中
    fd.append('startTime','2023-11')
    axios.post("/addFile.do",fd,{
        headers:{//请求头
            'Content-Type':'multipart/form-data'
        }
    }).then(res=>{//返回的数据
        console.log(res)
    })
}

三、具体操作（图片、文件上传）

function tuImg(e){//通过事件触发的函数

  let files = e.target.files[0];//图片文件名
  let reader = new FileReader();// 生成临时URL

  reader.readAsDataURL(files); // 关键一步，在这里转换的
  reader.onloadend = function () {
    imgTu.value = this.result;//赋值
  }

  let paramimg = new FormData(); //转换为表单进行发送给后端
  paramimg.append("file", files); //第一个参数就是后端要接受的字段，要一样，不一样会发送失败

    //向后端发送请求
  axios.post('/system/advertisingSystem',paramimg,{//请求路径，发送给后台的参数
    headers:{
      'Content-Type': 'multipart/form-data'//请求头一定要是文件类型的
    }
  })
      .then(rep=>{//请求成功执行
        console.log(rep)
      })
}