7-上传下载

上传下载

首先创建一张上传文件的表，例如：

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 = '文件信息表';

1.上传实现流程

1、el-input修改成el-upload

<el-uploadref="upload":limit="1"accept=".jpg, .png":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">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

2、引入获取token

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

3、data中添加属性

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

4、新增和修改操作对应处理fileList参数

handleAdd() {...this.upload.fileList = [];
}handleUpdate(row) {...this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
}

5、添加对应事件

// 文件提交处理
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);
}

注意：此种方式使用的是前端技术实现了文件的上传操作，修改文件时会有问题。

列表显示：

      <el-table-column label="头像" align="center" prop="filePath"><template slot-scope="scope"><el-imagestyle="width: 100px; height: 100px":src="scope.row.filePath"></el-image></template></el-table-column>

2.下载实现流程

1、添加对应按钮和事件

<el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleDownload(scope.row)"
>下载</el-button>

2、实现文件下载

// 文件下载处理
handleDownload(row) {var name = row.fileName;var url = row.filePath;var suffix = url.substring(url.lastIndexOf("."), url.length);const a = document.createElement('a')a.setAttribute('download', name + suffix)a.setAttribute('target', '_blank')a.setAttribute('href', url)a.click()
}