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

一部曲：文件上传

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

<!-- 上传按钮 -->
<!-- HTML -->
<el-table>
    <el-table-column label="操作" align="center">
        <template #default="scope">
           <div  class="svg-margin-right">
               <el-upload :http-request="httpRequest":data="{id: scope.row.id}">
                   <div style="width: 20px;height: 20px;">
                       <el-icon title="上传word" color="#424243" :size="20">
                           <Plus />
                       </el-icon>
                   </div>
                </el-upload>
            </div> 
        </template>
    </el-table-column>
</el-table>

//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页面
后端返回的是文件在云上的路径，可以直接访问

<!-- 下载按钮 -->
<!-- HTML -->
<el-table>
    <el-table-column label="操作" align="center">
        <template #default="scope">
           <div  class="svg-margin-right" title="下载"  @click="handleDownload(scope.row)">
               <div class="export"></div>
           </div>
        </template>
    </el-table-column>
</el-table>

//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)：在新窗口中打开页面

<!-- 预览按钮 -->
<!-- HTML -->
<el-table>
    <el-table-column label="操作" align="center">
        <template #default="scope">
           <el-icon class="svg-margin-right" title="预览" :size="20" @click="previewById(scope.row)">
               <Reading />
           </el-icon>
        </template>
    </el-table-column>
</el-table>

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

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