1.在页面中引入Upload组件

<!--上传文件-->
<el-upload class="upload-demo"ref="upload"action="#":limit="3":show-file-list="true":file-list="getFileList(scope.row.fileInfoList|| [])":on-exceed="handleExceed":on-remove="(...arg) => handleRemove(...arg, scope.row)":before-upload="(...arg) => handleBeforeUpload(...arg, scope.row)":http-request="(...arg) => uploadFile(...arg, scope.row, scope.$index) "><el-button size="small" type="text" >上传文件</el-button>
</el-upload>
<!--文件预览及下载-->
<el-link type="primary" style="margin-right:10px" v-for="item in form.fileInfoList" :key="item.fileId" @click.prevent="downloadFile(item)">{{ item.name }}</el-link> 

2.在api中定义fileInfo.js文件，内容如下

//api中fileInfo.js文件
export function uploadFile(data) {return request({url: '/test/uploadFile',method: 'post',data})
}export function downLoad(query) {return request({url: '/test/downFile',method: 'get',params: query})
}

3.在methods中添加如下方法

<script>//界面中调用fileInfo.js文件import {uploadFile, downLoad} from "@/api/fileInfo";export default {methods: {//格式化文件列表数据getFileList(row) {return row.map((item) => {if (item.fileId) {item.status = "success";item.uid = item.fileId;}return item;});},//上传前handleBeforeUpload(file, row) {const flag = file.size / 1024 / 1024 < 10;if (!flag) {this.msgError("上传文件大小不能超过 10MB!");} else {const flag = row.fileInfoList.some((item) => {return item.name == file.name;});if (flag) this.msgError("上传文件已存在");return !flag;}return flag;},//上传文件uploadFile(file, row, index) {let formData = new FormData();formData.append("file", file.file);formData.append("uid", file.file.uid);uploadFile(formData).then((res) => {if (res.code == 200) {row.fileInfoList = (row.fileInfoList || []).concat(Object.assign({ name: file.file.name }, res.data));}//上传文件成功后清空fileList列表缓存//this.refs.upload.clearFiles();}).catch((err) => {let fileList = this.$refs["upload"].uploadFiles;fileList.splice(fileList.findIndex((item) => item.uid == file.file.uid), 1);});},//删除handleRemove(file, fileList, row) {row.fileInfoList = fileList;},//限制选择个数handleExceed(files, fileList) {this.msgError(`最多上传 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},//下载文件downloadFile( row) {downLoad({ fileName: row.url }).then((res) => {if (res.code == 200) {window.open(res.msg);//浏览器中打开新的界面//window.location.href=url;//原始界面中打开}});}}}
</script>

4.关于其它方法使用请查看element官方文档:Element - The world's most popular Vue UI framework