vue实现简单的文件上传、下载、预览

管理系统总不可避免的会用到文件处理三部曲：上传、下载、预览。每次提到三部曲都会瑟瑟发抖，因为不知道会折在哪一部，今天就将三部曲整理下来，便于以后学习。

一部曲：文件上传

主要技能点:
el-upload: elementUI提供的组件 详情
http-request: el-upload提供的属性，主要是覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
FormData: 详情

//JS
function httpRequest(op) {const formData = new FormData()formData.append('file', op.file)uploadFile(op.data.id, formData).then(res => {op.onSuccess()console.log("上传成功！")})
}//调用接口 
export function uploadFile(id, file) {return request({url: '接口地址',method: 'post',data: file,params: {id:id},headers: {'Content-Type': 'multipart/form-data'},})
}

二部曲：文件下载

主要技能点：
window.location.href：当前页面打开URL页面
后端返回的是文件在云上的路径，可以直接访问

//JS
function handleDownload(row) {loading.value = truedownloadWord(row.id).then(res => {loading.value = falsewindow.location.href = (res.data.url)}).catch(() => {loading.value = false})
}// 调用接口
export function downloadWord(id) {return request({url: `接口地址/${id}`,method: 'get'})
}

三部曲：文件预览

主要技能点：
responseType: 'blob'：用来接收文件流

 new Blob([res], {type: 'application/pdf'})：将返回的数据流转为blob类型

 window.URL.createObjectURL(blob)：将blob转成url

window.open(url)：在新窗口中打开页面

//JS
function previewById(row) {loading.value = truepreview(row.id).then(res => {loading.value = falseconst blob = new Blob([res], {type: 'application/pdf'})const url = window.URL.createObjectURL(blob)window.open(url)}).catch(err => {loading.value = false})
}//调用接口
export function preview(id) {return request({url: '接口地址',params: {id},method: 'get',responseType: 'blob'})
}

是不断努力加油的芋头呀，失踪人口回归持续更新中~ ~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！