vue上传附件

article/2025/8/28 20:50:10

流程:点击上传到–》文件服务器upload—》调用saveFile–》调用FileLists
文件操作列表:
在这里插入图片描述

     <FormItem label="附件信息"><Upload :action="uploadUrl()" name="multipartFile" multiple :on-remove="handleRemove":on-success="handleSuccess" :on-error="handleError" :default-file-list="defaultList"ref="update_ref" :headers="{'X-token':token}" :show-upload-list=true :on-preview="handlePreview":disabled=inputDisable><Button icon="ios-cloud-upload-outline">附件上传</Button></Upload></FormItem>uploadUrl() {// return basePath + "hwfile/upload";this.url=basePath+"hwfile/upload";return this.url;},filesaveSj() {//保存文件上传的路径到数据库let url = "/upload/save";this.$get(url,{fileName: this.filename,path: this.fileurl,size: this.filesize,relationId: this.relationId,filePath: this.filePath,catalog: this.catalogsj,delFlag: false,},res => {let result = res.data;if (result.status == 200) {console.log('保存到数据库成功')this.uploadFileList(this.$route.query.id, this.catalogsj);} else {this.$toast(result.msg);}},err => {this.$hideMark();this.$toast(this.networkerr);});},handleRemove(file, fileList) {if (this.auditStateFlag != "") {if (this.auditStateFlag == "1") {this.$toast("合同已审核,不允许删除!");this.uploadFileList(this.$route.query.id,"common",this.defaultList);// this.uploadFileList(//     this.$route.query.id,//     "additional",//     this.addiFileList// );// this.uploadFileList(//     this.$route.query.id,//     "sfbzht",//     this.sfbzhtFileList// );return;}}this.$Modal.confirm({title: "删除提示",content: "是否确定删除",okText: "确定",canceText: "取消",onOk: async () => {let url = "/upload/deleteById";this.$get(url,{id: file.id},res => {let result = res.data;if (result.status == 200) {this.removeOBSFile(file);} else {this.$toast(result.msg);}},err => {this.$hideMark();this.$toast(this.networkerr);});},onCancel: () => {fileList.push(file);}});},handleSuccess(response, file, fileList) {console.log(response);console.log(file);console.log(fileList);console.log(response.data.filePath);console.log(response.data.url);let url = response.data.url;this.filePath = response.data.filePath;this.filename = file.name;this.fileurl = url;this.filesize = file.size;console.log("name:" + file.name + "url:" + url + "size:" + file.size);console.log("文件上传成功");this.filesaveSj();this.$Message.success('文件上传成功');this.defaultList = [];/* this.defaultList.push({name: file.name,url: response.data.url,size: file.size,
}) */},handleError(error, file, fileList) {//文件上传失败this.$Message.error("文件上传失败");},handlePreview(file) {//window.open(file.url)const url = "/hwfile/download";this.$get(url,{filename: file.path},res => {let result = res.data;if (result.status == 200) {console.log(result.msg);this.filePathUrl = result.data;window.open(this.filePathUrl);} else {this.$toast(result.msg);}},err => {this.$hideMark();this.$toast(this.networkerr);});},uploadfjsj(value){this.catalogsj=value;this.uploadFileList(this.$route.query.id,value);this.sjfj1=true;},uploadFileList(id,catalog) {//查询附件列表let url = "/upload/selectFileInfo";this.$get(url,{id:id,catalog:catalog},res => {let result = res.data;if (result.status == 200) {console.log("查询文件列表");console.log(result.data);/*for (let i in result.data) {let data = result.data[i];let file = {};file.id = data.id;file.url = data.fileUrl;file.size = data.fileSize;file.name = data.fileName;this.defaultList.push(file);}*/this.filejh=result.data;} else {this.$toast(result.msg);}},err => {this.$hideMark();this.$toast(this.networkerr);});},

http://chatgpt.dhexx.cn/article/l8nFk5g4.shtml

相关文章

WangEditor添加上传附件功能 vue3

看官方文档要求 WangEditor/editor 版本 >5.1.16 下载上传附件的插件 yarn add wangeditor/plugin-upload-attachment 首先要注册到编辑器&#xff0c;如果把下面的代码写在WangEditor的组件里出现第一次使用编辑没问题&#xff0c;但是第二次编辑会报错的问题&#xff0…

csdn如何上传附件

首先登陆你的csdn博客&#xff0c;看到首页有个下载 点击下载 进去之后点击上传资源 然后就可以上传附件了 不过他会审核两天&#xff0c;不要着急&#xff0c;过两天就发布出来了

java fileupload上传附件到服务器,可携带参数(简单易用)可跨域,看这篇就够了

一个很简单实用的上传附件实例 首先主要用到的包&#xff1a; 先看服务端代码&#xff0c;我这里是用了Servlet&#xff0c;在web.xml配置 <servlet><servlet-class>com.file.FileEntryServlet</servlet-class><servlet-name>FileServlet</servlet…

公众号的附件怎么上传(如Word、Excel、Pdf等)

公众号我们都接触过&#xff0c;有企业的、有单位的、有个人的&#xff0c;公众号主要用来发布文章和消息&#xff0c;可以提供企业单位的对外沟通&#xff0c;提升企业单位的形象。 随着公众号的日益强大&#xff0c;我们也可以利用公众号对外发布招聘、重大消息公示、资料收…

网络安全实验之《VPN》实验报告

一、实验目的 (1)课上实验&#xff1a; 1.在Windows中配置&#xff08;内置或者专有&#xff09;IPSec。 2.通过抓包工具抓取建立IPSec的协商密钥过程&#xff0c;和建立之后的加密通信数据包&#xff0c;并进行分析。 (2)课后实验&#xff1a; 1.配置Cisco Packet Tracer…

课程实验三-bomb实验

实验题目&#xff1a; 程序运行在linux环境中。程序运行中有6个关卡&#xff08;6个phase&#xff09;&#xff0c;每个phase需要用户在终端上输入特定的字符或者数字才能通关&#xff0c;否则会引爆炸弹&#xff01;需要使用gdb工具反汇编出汇编代码&#xff0c;结合c语言文件…

cachelab实验

计算机系统原理实验日志 一、实验内容 1、编写一个C程序&#xff08;csim.c&#xff0c;大约200-300行&#xff09;&#xff0c;用于模拟Cache的行为。 2、已提供一个参考的cache模拟器(可执行文件csim-ref)&#xff0c;目标是自己写的 csim和参考的csim-ref行为一致&#…

认真一点!-实验吧

这个题其实是个布尔盲注题&#xff0c;怎么说&#xff0c;正常是you are in&#xff0c;报错是you are not in&#xff0c;触发waf是sql injection detected 然后fuzz一下&#xff0c;图我就不贴了&#xff0c;做的时候忘了截下图 结果大概是过滤了and&#xff0c;空格&#…

Lab1实验分享

文章目录 一.内核的物理位置二.Bootloader三.编译和链接四.va_list、va_start和va_end三个宏的用法。五.ELF文件的结构六.lp_Print()函数流程图 一.内核的物理位置 操作系统最重要的部分是操作系统内核&#xff0c;因为内核需要直接与硬件交互管理各个硬件&#xff0c;从而利用…

CSAPP实验二——bomb lab实验

CSAPP实验二—— bomb lab实验 实验前准备第一部分&#xff08;phase_1&#xff09;第二部分&#xff08;phase_2&#xff09;第三部分&#xff08;phase_3&#xff09;第四部分&#xff08;phase_4)第五部分&#xff08;phase_5&#xff09;第六部分&#xff08;phase_6&#…

Attacklab实验

一、实验目的 1、深入了解缓冲区溢出的隐患&#xff0c;了解如何利用缓冲区溢出这个漏洞对现有程序进行控制流劫持、执行非法程序代码&#xff0c;从而造成对程序进行攻击以及破坏的过程&#xff1b; 2、增强对程序机器级表示、汇编语言、调试器和逆向工程等理解。 二、实验…

计算机系统基础实验-LinkLab实验

这是大三时的实验课&#xff0c;很久以前的东西&#xff0c;应要求放出来&#xff0c;做的不是很好。linux永远都是很重要的&#xff0c;希望我和大家都记得这个。实际上做到第五阶段我就不会了。 实验课程名称&#xff1a;计算机系统基础 实验项目名称&#xff1a;LinkLab实…

Lab5实验分享

文章目录 一.全局变量名词解释二.实验难点图示1.文件系统层次关系梳理2.多级目录与多级索引 三.代码梳理1.磁盘管理2.文件系统3.用户接口4.文件服务 一.全局变量名词解释 #define NBLOCK 1024 //一块磁盘里面的block数目 uint32_t nbitblock; // 用于存储bitmap的block数目 ui…

实验.......

第一步配置ip与环回地址 做hub&spoken的fullmesh结构以r2为例 其他路由同样操作 要求使用rip协议&#xff0c;以r2为例

实验吧——WEB-认真一点!

认真一点&#xff01; 打开链接&#xff0c;看到这个页面&#xff0c;第一反应又是sql注入 翻翻源码没有任何提示 打开burp开始抓包&#xff0c;包头与返回头又没有任何提示&#xff0c;试着开始修改ID 的值&#xff0c;观察页面变化。 提交1或用语句让框内为真&#xff0c;显…

实验....

实验要求 r1代表运营商 r1远程登录r2实际登陆r9 r3访问r7的换回地址走r5 全网可达 1.全网可达 配置ip 2配置rip协议&#xff0c;r8r9用v1其余用v2 3让r8r9接入内网&#xff0c;在r8对端接口写入v2 r3访问r7的换回地址走r5 r1代表运营商 r1远程登录r2实际登陆r9 先打开r…

实验吧 认真一点!

真的很久很久没碰过这个玩意了&#xff0c;真是不会了&#xff0c;而且这个题目本身就不是很容易&#xff0c;搞得我也是满肚子邪火&#xff0c;很气。这个题目主要难在它吧过滤和ban结合到了一起了。我们还是先看题目,首先拿到题目看到输入id0和输入id1结果不一样&#xff0c;…

让我进去-实验吧

这题做的真的是久&#xff0c;莓办法&#xff0c;太菜了 进去看见cookie有个source值很奇怪&#xff0c;把他改成1试一下就收到这段代码 $flag "XXXXXXXXXXXXXXXXXXXXXXX"; $secret "XXXXXXXXXXXXXXX"; // This secret is 15 characters long for secu…

实验吧

1.变异凯撒 把flag转化为ascii码&#xff0c;加密密文转化为ascii码&#xff0c; 因为是凯撒加密&#xff0c;所以思考移动的位数&#xff0c;分别是加了5&#xff0c;6&#xff0c;7&#xff0c;8.。。。 所以移动的位次是从5递加 得到结果 ascii码值转化&#xff0c;得到flag…

[大学物理实验-5]波尔共振实验

[大学物理实验-5]波尔共振实验 前言实验预习&#xff08;Preview&#xff09;实验报告&#xff08;Report&#xff09;实验报告&#xff08;Report&#xff09;总结&#xff08;Sum up&#xff09; 前言 最近在整理一些学过的课程的资料&#xff0c;有一些课虽然和我的专业毫无…