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();// 生成临时URLreader.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)})
}