验证中...
1.在SQL数据库中创建上传附件的记录表
Raw Copy
/****** Object: Table [dbo].[自定义表名] Script Date: 06/12/2019 20:47:19 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[自定义表明](
[num] [int] NOT NULL,
[uid] [nvarchar](100) NOT NULL,
[name] [nvarchar](100) NULL,
[suffix] [nvarchar](50) NULL,
[是否启用] [int] NULL
) ON [PRIMARY]
GO
2.拷贝上传下载后台程序到通讯服务器相对路径下:C:\通讯服务器V3.1\MES_Manage\submit,并在C:\通讯服务器V3.1\MES_Manage\webpage中创建文件夹file存储文件
Raw Copy
两个一般处理程序,uploadFile.ashx用于上传文件、downloadFile.ashx用于下载,若需要更改文件位置或数据库结构请自行修改源码
3.在vue项目request.js中引入一般处理页
Raw Copy
export const uploadFile = `http://localhost:8411/submit/uploadFile.ashx`
export const downloadFile = `http://localhost:8411/submit/downloadFile.ashx`
4.将组件拷贝到项目中
Raw Copy
MES-FileUpload.vue 用于上传文件,其样式为一个按钮可以根据自己业务随意放置
MES-FileDown.vue 用于下载,其样式为一个装有文件列表的card标签,根据自己业务随意放置
5.在业务页中引入组件
Raw Copy
<script>
import FileUpload from './MES-FileUpload' //根据自己放置组件的路径填写
import FileDown from './MES-FileDown' //根据自己放置组件的路径填写
export default {
components: { FileUpload, FileDown },
data() {
return {
}
}
</script>
6.调用上传组件
Raw Copy
// num 用来绑定上传条件,如该文件是项目的纪要,则num绑定项目流水号
// table-name 值为步骤一自定义的表名
// 其余项不用更改
<template>
<div>
<FileUpload ref="FileDown" :num="machineDrawValue" table-name="PDM_机床总图_文件列表" @listenMsg ="listenMsgFromChid"/>
</div>
</template>
6.调用文件列表下载组件
Raw Copy
// num 用来绑定上传条件,如该文件是项目的纪要,则num绑定项目流水号
// table-name 值为步骤一自定义的表名
// delete-show 表示是否可以删除文件,0为禁用删除,1为启用删除
// operation-type 表示对列表中的文件的操作类型,0表示通知浏览器打开该文件(如PDF),1表示通知浏览器下载该文件
<template>
<div>
<FileDown ref="FileDown" :num="machineDrawValue" delete-show="1" operation-type="1" table-name="PDM_机床总图_文件列表"/>
</div>
</template>
7.如果一个页面中同时使用上传组件与下载组件,则在方法中拷贝如下方法(直接复制不用更改),通知下载组件在上传成功时查询文件列表(不写需要刷新才能查到)
Raw Copy
listenMsgFromChid: function(data) {
this.$refs.FileDown.getFileList(data)
},

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close