vue中element 的upload組件發(fā)送請求給后端操作
更新時間：2020年09月07日 11:29:57 作者：瘦瘦的小芝芝
這篇文章主要介紹了vue中element 的upload組件發(fā)送請求給后端操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.用到了before-upload屬性，
用于在上傳文件前的校驗，并且發(fā)送請求給后端，傳輸格式進行文件流傳輸
什么都不用設(shè)置，action屬性隨便設(shè)置，不能為空即可！
在before-upload屬性的方法中的代碼如下：
var _this = this;
debugger;
// var files=file.target.files[0];
debugger;
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上傳頭像圖片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上傳頭像圖片大小不能超過 2MB!");
}
// return isJPG && isLt2M;
let formData = new FormData();
formData.append("file", file);
axios
.post("http://192.168.0.116:8083/pic/upload", formData)
.then(function(response) {
_this.enclosure.openPermitimgUrl = response.data;
// alert(response.data);
console.log(response);
})
.catch(function(error) {
alert("上傳失敗");
console.log(error);
});
補充知識：vue element 實現(xiàn)上傳導(dǎo)入功能(請求到后臺接口)
1、主要用到了element中upload的onSuccess方法
action后面跟著的是上傳文件后要被導(dǎo)入的接口
data是我們可能上傳多個 定義一個數(shù)組
2、在data中定義 uploadBase:{}
3、請求后臺的導(dǎo)入接口 傳給后臺所需要的參數(shù)
以上這篇vue中element 的upload組件發(fā)送請求給后端操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue上傳組件vue Simple Uploader的用法示例
- vue webuploader 文件上傳組件開發(fā)
- 在vue項目中使用element-ui的Upload上傳組件的示例
- vue2.0 使用element-ui里的upload組件實現(xiàn)圖片預(yù)覽效果方法
- 基于vue-upload-component封裝一個圖片上傳組件的示例
- vue-cli3.0+element-ui上傳組件el-upload的使用
- vue element upload組件 file-list的動態(tài)綁定實現(xiàn)
- vue使用Element el-upload 組件踩坑記
- 實現(xiàn)一個Vue版Upload組件
相關(guān)文章
下面小編就為大家分享一篇基于vue1和vue2獲取dom元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了如何通過vue實現(xiàn)打印功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了vue實現(xiàn)表單未編輯或未保存離開彈窗提示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue3使用elementPlus進行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進行展示,所以本文給大家介紹了vue3使用elementPlus進行table合并處理的實例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-02-02
關(guān)于element?ui的菜單default-active默認選中的問題
這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3中實現(xiàn)網(wǎng)頁時鐘功能(顯示當前時間并每秒更新一次)
本文將詳細介紹如何在Vue3中實現(xiàn)一個每秒鐘自動更新的網(wǎng)頁時鐘,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
Vue設(shè)置提示和警告彈出框?qū)崙?zhàn)案例
頁面中會有很多時候需要彈窗提示,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置提示和警告彈出框的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
在項目中,有時需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題
今天小編就為大家分享一篇解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08