解讀element?el-upload上傳的附件名稱不顯示?file-list賦值
element el-upload上傳的附件名稱不顯示 file-list賦值
問題
上傳附件后 文件名字不顯示
解決
1、首先看file-list 是否在data中定義
2、如果定義了,文件名字還是不顯示,在獲取數(shù)據(jù)之后,把文件名字push到fileList中去,給name值賦值就可以顯示了。
this.fileList.push({ name: '', url:'' });
el-upload上傳附件-總結(jié)
提示:小編今天介紹一下 用FormData 結(jié)合 el-upload 實現(xiàn)上傳文件
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
FormData是什么?
傳統(tǒng)的文件上傳方式是提交form表單,今天使用了 formdata 所以想好好研究一下
FormData 接口提供了一種表示表單數(shù)據(jù)的鍵值對 key/value 的構(gòu)造方式,
并且可以輕松的將數(shù)據(jù)通過XMLHttpRequest.send() 方法發(fā)送出去,
本接口和此方法都相當簡單直接。如果送出時的編碼類型被設為 “multipart/form-data”,它會使用和表單一樣的格式。
提到了 “可以輕松的將數(shù)據(jù)通過XMLHttpRequest.send() 方法發(fā)送出去” 那不是ajax嗎
那么我們就用ajax來實現(xiàn)文件上傳吧??!
使用FormData.append()添加屬性
使用步驟
使用 Element-ui 中的el-upload 最終實現(xiàn)
通過 slot 你可以傳入自定義的上傳按鈕類型和文字提示??赏ㄟ^設置limit和on-exceed來限制上傳文件的個數(shù)和定義超出限制時的行為??赏ㄟ^設置before-remove來阻止文件移除操作。
讀入數(shù)據(jù)
代碼如下(示例):
<el-upload style="width: 579px" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :http-request="http_request" // 上傳 :on-preview="handlePreview" :before-remove="beforeRemove" // 刪除 multiple :on-exceed="handleExceed" // 限制 :file-list="fileList" // 生成 > <el-button size="small" class="button2" style="150px;" >點擊上傳</el-button > <!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過500kb</div> --> </el-upload>
點擊http_request 這里結(jié)合使用 FormaData
?var formData = new FormData(); ? ? ? formData.append("file", params.file); ? ? ? formData.append("fileName", params.file.name); ? ? ? formData.append("tenantId", sessionStorage.getItem("id"));
接著把formadata 作為Ajax 的參數(shù) 提交 即可
? this.ajax= ({ ?? ??? ? url: '請求地址', ? ? ? ? ?data: formData, ? ? ? ? ?method: 'post', ? ? ? ? ?headers: {? ? ? ? ? ? "Content-Type": "application/json", ? ? ? ? ? Accept: "application/json", ? ? ? ? ? "X-Auth-Token": sessionStorage.getItem("token"), ? ? ? ? ?} }) ?.then(() => {? ?? ?調(diào)用方法一半情況是調(diào)用查詢附件詳情接口(詳情的方法查詢到的數(shù)據(jù)賦值到:file-list 中即可 ) })
刪除附件:
? ? beforeRemove(file, fileList) { ? ? ? ?if (file && file.status === "success") { ? ? ? ? this.$confirm("您確定要刪除嗎?", "提示", { ? ? ? ? ? confirmButtonText: "確定", ? ? ? ? ? cancelButtonText: "取消", ? ? ? ? ? confirmButtonClass: "butText", ? ? ? ? ? type: "warning", ? ? ? ? ? center: true ? ? ? ? }) ? ? ? ? ? .then(() => { ? ? ? ? ? ? ? this.$axios({ ? ? ? ? ? ? ? ? method: "post", ? ? ? ? ? ? ? ? url: ? ? ? ? ? ? ? ? headers: { ? ? ? ? ? ? ? ? ? "Content-Type": "application/json", ? ? ? ? ? ? ? ? ? Accept: "application/json", ? ? ? ? ? ? ? ? ? "X-Auth-Token": sessionStorage.getItem("token"), ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? .then(res => { ? ? ? ? ? ? ? ? // console.log(res); ? ? ? ? ? ? ? ? this.query_attachment(); ? ? ? ? ?? ? ? ? ? ? ? ? ? ? this.$message({ ? ? ? ? ? ? ? ? ? ? type: "success", ? ? ? ? ? ? ? ? ? ? message: "刪除成功!" ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? .catch(err => { ? ? ? ? ? ? ? ? console.log(err); ? ? ? ? ? ? ? }); ? ? ? ? ? }) ? ? ? ? ? .catch(() => { ? ? ? ? ? ? this.query_attachment(); ? ? ? ? ? ? this.$message({ ? ? ? ? ? ? ? type: "info", ? ? ? ? ? ? ? message: "已取消刪除" ? ? ? ? ? ? }) ? ? ? ? ?? ? ? ? ? ? }); ? ? ? } ? ? },
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
- element-ui中el-upload多文件一次性上傳的實現(xiàn)
- Element el-upload上傳組件使用詳解
- elementui使用el-upload組件如何實現(xiàn)自定義上傳
- 如何在ElementUI的上傳組件el-upload中設置header
- 解決ElementUI組件中el-upload上傳圖片不顯示問題
- element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)
- elementui?el-upload一次請求上傳多個文件的實現(xiàn)
- elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟
- element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼
相關(guān)文章
vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue-cli?npm如何解決vue項目中缺失core-js的問題
這篇文章主要介紹了vue-cli?npm如何解決vue項目中缺失core-js的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08關(guān)于Vue?CLI3中啟動cli服務參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動cli服務參數(shù)說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue?transition組件簡單實現(xiàn)數(shù)字滾動
這篇文章主要為大家介紹了Vue?transition組件簡單實現(xiàn)數(shù)字滾動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09