若依框架文件的上传和预览（超简版）

一、上传：

1、首先创建一张上传文件的表

drop table if exists sys_file_info;
create table sys_file_info (
  file_id           int(11)          not null auto_increment       comment '文件id',
  file_name         varchar(50)      default ''                    comment '文件名称',
  file_path         varchar(255)     default ''                    comment '文件路径',
  primary key (file_id)
) engine=innodb auto_increment=1 default charset=utf8 comment = '文件信息表';

2、用代码生成器生成代码，更新代码，重启系统

3.1 找到前端中的 <el-dialog> 模块，将el-input修改成el-upload：

<!--
limit:限制文件个数
accept:限制上传文件类型
action:访问后端路径
 -->
<el-upload
  ref="upload"
  :limit="1"
  accept=".doc, .docx"
  :action="upload.url"
  :headers="upload.headers"
  :file-list="upload.fileList"
  :on-progress="handleFileUploadProgress"
  :on-success="handleFileSuccess"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过10MB</div>
</el-upload>

3.2 引入：Token

import { getToken } from "@/utils/auth";

3.3 data() -- return 中添加：

// 上传参数
upload: {
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: process.env.VUE_APP_BASE_API + "/common/upload",
  // 上传的文件列表
  fileList: []
}

3.4 methods：添加对应的方法

// 文件提交处理
submitUpload() {
  this.$refs.upload.submit();
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
  this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
  this.upload.isUploading = false;
  this.form.filePath = response.url;
  this.msgSuccess(response.msg);
},

这样就可以正常运行了，如下图：

（1）列表界面&菜单界面：

（2）新增&编辑：

选取文件；上传到服务器，就是调用后端接口传给数据库的。

成功后会显示绿色，也可以删除；列表中展示。

二、 预览：图片就打开新的网页标签页查看，文档就直接下载下来。

找到<el-table>修改文件路径一栏，点一下链接就能下载。

<el-table-column label="文件路径" align="center" prop="filePath">
<template slot-scope="scope">
  <a :href="scope.row.filePath" target="_blank" class="buttonText">{{scope.row.filePath}}</a>
</template>
</el-table-column>