文件上传准备工作
Vue项目中，经常需要上传文件。别急，咱慢慢说。其实很简单，只需要在HTML的input元素中使用FormData，用户选择好文件后，”change”事件能抓取到文件，再塞入Vue实例里面。接着，用FormData搞个表单，把文件加进去。最后，提交一下，搞定轻松完成File上载。
处理文件上传
在Vue里处理文件上传挺容易的，这儿有个小技巧给你看看：
html
“`javascript
data(){
return {
file: null
}
},
methods:{
handleFileUpload(event){
选这文件么，直接用event.target.files[0]。
简单说说，咱们直接搞个叫formdata的FormData对象。
把文件交给formData，就像传给它这个文件似的。
//发送文件上传请求
不要忘，用Ajax发个请求到`/upload`那儿去哦：就是`axios.post(“/upload”, formsData)`咯。
.then(response =>{
export default { data() { return { file: null, }; }, methods: { handleFileUpload(e) { this.file = e.target.files[0]; }, uploadFile() { let formData = new FormData(); formData.append('file', this.file); // 发送文件上传请求 // axios.post('/upload', formData).then(response => { // console.log(response.data); // }); // 省略上传逻辑，此处只是演示 console.log('文件上传成功'); }, }, };
“恭喜，文件上传成功！”
})
.catch(error =>{
上传文件出错了！
});
}
这段代码就是看着你在input元素那儿点来点去地选文件，然后，它会把这个文件搬到Vue实例里的file属性那里。接下来，我们就用FormData弄个表格，把刚刚那个文件塞进去。最后，axios这样子的神器就能帮我们把文件偷偷地上传给服务器咯~
服务器端处理
当你传来文件求救，我就得动脑筋帮帮忙。首先，要学会把表单数据弄清楚，接着让文件歇息去。选什么编程语言好？像Node.js 啊、Java呀还有 Python，它们都挺行的
文件下载准备工作
除了传文件，下文件也重要！一般的流程是，后台得有个接口可以触发下载。前端就简单点，发个请求把服务端传来的文件数据抓下来就好了，最后让用户自己去下载。
处理文件下载
以下是一个简单的示例代码来演示如何使用Vue处理文件下载：
handleFileDownload(){
就是用 axios 获取那个’download’地址的文本，类型还是‘text’哈~
Blob 的URL，其实就是把它封装进一个链接里！
我们来创建个链接，方法是在网页上创建一个叫’a’的东西。
export default { methods: { downloadFile() { // 发送文件下载请求 // axios.get('/download').then(response => { // let link = document.createElement('a'); // link.href = window.URL.createObjectURL(new Blob([response.data])); // link.setAttribute('download', 'filename'); // document.body.appendChild(link); // link.click(); // link.remove(); // }); // 省略下载逻辑，此处只是演示 console.log('文件下载成功'); }, }, };
link.href = url;
把链接的”下载”属性设为”文件.pdf”。
直接把链接加到页面底部body里面就行了。
link.click();
下载文件出现问题啦!
你看，点击那个按钮就能下载了。只需要用axios发送个get请求，就可以把服务器的文件夹拿到手。然后把文件属性变成可以下载的格式放进Blob对象，再把它转成链接给a标签。最后点下a标签，弹出窗口就会提示你正在下载。
跨域资源共享（CORS）
好，网上做东西就是烦，浏览器老对我们卡壳儿，说是网页不许跨域分享资源（CORS），搞得我传文件下文件都费劲！那怎么办？要不我们在服务端弄点响应头信息，或者请个代理大哥来帮忙呗。
其他注意事项
-网上传大文件？试试分片段！这样能省内存又稳定！
-文件下载时应该注意对敏感信息进行加密保护。
-你们想改啥就说，加进度、设权限，都能搞定。按需要来！
结语：
别急，我来给你说说看怎么用 Vue 上传和下载文件，还有实际的例子！看完这个科普，你就会更加清楚前端和后端是如何协同工作传输文件哒！
评论0