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 = true
  downloadWord(row.id)
  .then(res => {
    loading.value = false
    window.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 = true
  preview(row.id)
  .then(res => {
    loading.value = false
    const 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'
  })
}

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