ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

vue3文件 上传;图片上传

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)})
}

返回列表