电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

VUE UPLOAD 通過ACTION返回上傳結果操作

瀏覽:95日期:2022-11-28 08:02:07

通過Upload 的action方法 返回不了結果,可以通過on-success方法中獲取返回結果

<Upload accept='.xls, .xlsx' :action='uploadUrl' :on-success='onSuccess' :on-error='handleError' :before-upload='beforeUpload' style='float:right'> <Button type='primary' icon='ios-cloud-upload-outline' >導入</Button> </Upload>-----------------------------------------computed: { uploadUrl() { return baseUrl + '/ImportExcel/'; }//file為ImportExcel方法返回的結果onSuccess(file){ if(file.code=='1') { this.$Message.error('導入失敗:' + file.msg); return; } },

補充知識:Element-UI中上傳的action地址相對問題

我想要在vue里只出現上傳地址后綴,然后具體的上傳地址,前綴是項目配置里的服務器地址

1、action直接寫相對地址

<el-upload :action='/base_data/import_data' :data='uplaodData' name='files' :on-success='uploadSuccess' :on-error='uploadError' accept='xlsx,xls' :show-file-list='false'> <el-button class='btn light small'><i class='icon iconfont icon-piliangdaoru'></i>批量導入</el-button> </el-upload>

這樣的結果,上傳請求的的前綴都是本地localhost:8080,并不是我想要的相對服務器的地址

2、屏蔽掉action地址,我自己寫請求

<el-upload :action='111' //這里隨便寫,反正用不到,但是又必須要寫,無奈 :before-upload='beforeUpload' :on-success='uploadSuccess' :on-error='uploadError' accept='xlsx,xls' :show-file-list='false'> <el-button class='btn light small'><i class='icon iconfont icon-piliangdaoru'></i>批量導入</el-button> </el-upload>

methods里這么寫

beforeUpload(file){ let fd = new FormData(); fd.append(’files’,file);//傳文件 fd.append(’id’,this.srid);//傳其他參數 axios.post(’/api/up/file’,fd).then(function(res){ alert(’成功’); }) return false //屏蔽了action的默認上傳},

這樣的吧但是這樣的我發過去的東西老是空的,應該是我不太懂FormData()的用法吧,但是我單獨用FormData()的get方法,都能get到,后來發現是因為文件編碼問題

默認的文件編碼application/x-www-form-urlencoded是這個,但是上傳文件需要的是multipart/form-data (這個格式的請求太好認, 一長串有沒有,里面包括了文件名…),當然有時候也會是這樣(files: (binary)),都是ok的

啊~,真的要郁悶了,最后還是讓我發現了一種辦法

那就是!!!

1、把全局配置的服務器地址引入

import url from ’@/http/http’

2、在data里定義url:‘’,

3、在create方法里this.url = url;

4、在上傳組件的action上

<el-upload :action='url+this.uploadUrl' //手動拼地址 :data='uplaodData' name='files' :on-success='uploadSuccess' :on-error='uploadError' accept='xlsx,xls' :show-file-list='false'> <el-button class='btn light small'><i class='icon iconfont icon-piliangdaoru'></i>批量導入</el-button> </el-upload>

好了,都好了,相對地址是服務器地址,上傳文件編碼也是multipart/form-data

以上這篇VUE UPLOAD 通過ACTION返回上傳結果操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 热回收盐水机组-反应釜冷水机组-高低温冷水机组-北京蓝海神骏科技有限公司 | 提升海外网站流量,增加国外网站访客UV,定制海外IP-访客王 | 通用磨耗试验机-QUV耐候试验机|久宏实业百科 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 广州展览制作|展台制作工厂|展览设计制作|展览展示制作|搭建制作公司 | 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 科研ELISA试剂盒,酶联免疫检测试剂盒,昆虫_植物ELISA酶免试剂盒-上海仁捷生物科技有限公司 | 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 加气混凝土砌块设备,轻质砖设备,蒸养砖设备,新型墙体设备-河南省杜甫机械制造有限公司 | 包装机_厂家_价格-山东包装机有限公司 | 创富网-B2B网站|供求信息网|b2b平台|专业电子商务网站 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 运动木地板价格,篮球馆体育运动木地板生产厂家_欧氏地板 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 | 致胜管家软件服务【在线免费体验】 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | Maneurop/美优乐压缩机,活塞压缩机,型号规格,技术参数,尺寸图片,价格经销商 | 煤机配件厂家_刮板机配件_链轮轴组_河南双志机械设备有限公司 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 济南货架定做_仓储货架生产厂_重型货架厂_仓库货架批发_济南启力仓储设备有限公司 | 光照全温振荡器(智能型)-恒隆仪器| 废气处理_废气处理设备_工业废气处理_江苏龙泰环保设备制造有限公司 | 氨水-液氨-工业氨水-氨水生产厂家-辽宁顺程化工 | 茅茅虫AI论文写作助手-免费AIGC论文查重_写毕业论文降重 | 东莞压铸厂_精密压铸_锌合金压铸_铝合金压铸_压铸件加工_东莞祥宇金属制品 | 雨燕360体育免费直播_雨燕360免费NBA直播_NBA篮球高清直播无插件-雨燕360体育直播 | 锂电池砂磨机|石墨烯砂磨机|碳纳米管砂磨机-常州市奥能达机械设备有限公司 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 福尔卡(北京)新型材料技术股份有限公司 | 翅片管换热器「型号全」_厂家-淄博鑫科环保 | 丹佛斯变频器-丹佛斯压力开关-变送器-广州市风华机电设备有限公司 | 精雕机-火花机-精雕机 cnc-高速精雕机-电火花机-广东鼎拓机械科技有限公司 | 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 生鲜配送系统-蔬菜食材配送管理系统-连锁餐饮订货配送软件-挪挪生鲜供应链管理软件 |