解讀element?el-upload上傳的附件名稱不顯示?file-list賦值

更新時間：2022年10月08日 09:59:29 作者：杰瑞LJ

這篇文章主要介紹了解讀element?el-upload上傳的附件名稱不顯示?file-list賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element el-upload上傳的附件名稱不顯示 file-list賦值

問題

上傳附件后文件名字不顯示

解決

1、首先看file-list 是否在data中定義

2、如果定義了，文件名字還是不顯示，在獲取數據之后，把文件名字push到fileList中去，給name值賦值就可以顯示了。

this.fileList.push({
  name: '',
  url:''
 });

el-upload上傳附件-總結

提示：小編今天介紹一下用FormData 結合 el-upload 實現上傳文件

提示：以下是本篇文章正文內容，下面案例可供參考

FormData是什么？

傳統(tǒng)的文件上傳方式是提交form表單，今天使用了 formdata 所以想好好研究一下

FormData 接口提供了一種表示表單數據的鍵值對 key/value 的構造方式，

并且可以輕松的將數據通過XMLHttpRequest.send() 方法發(fā)送出去，

本接口和此方法都相當簡單直接。如果送出時的編碼類型被設為 “multipart/form-data”，它會使用和表單一樣的格式。

提到了 “可以輕松的將數據通過XMLHttpRequest.send() 方法發(fā)送出去” 那不是ajax嗎

那么我們就用ajax來實現文件上傳吧?。?/p>

使用FormData.append()添加屬性

使用步驟

使用 Element-ui 中的el-upload 最終實現

通過 slot 你可以傳入自定義的上傳按鈕類型和文字提示?？赏ㄟ^設置limit和on-exceed來限制上傳文件的個數和定義超出限制時的行為。可通過設置before-remove來阻止文件移除操作。

讀入數據

代碼如下（示例）：

   <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 這里結合使用 FormaData

?var formData = new FormData();
? ? ? formData.append("file", params.file);
? ? ? formData.append("fileName", params.file.name);
? ? ? formData.append("tenantId", sessionStorage.getItem("id"));

接著把formadata 作為Ajax 的參數提交即可

? this.ajax= ({
?? ??? ? url: '請求地址',
? ? ? ? ?data: formData,
? ? ? ? ?method: 'post',
? ? ? ? ?headers: {?
? ? ? ? ? "Content-Type": "application/json",
? ? ? ? ? Accept: "application/json",
? ? ? ? ? "X-Auth-Token": sessionStorage.getItem("token"),
? ? ? ? ?}
})
?.then(() => {?
?? ?調用方法一半情況是調用查詢附件詳情接口（詳情的方法查詢到的數據賦值到: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: "已取消刪除"
? ? ? ? ? ? })
? ? ? ? ??
? ? ? ? ? });
? ? ? }
? ? },

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue常用知識點整理
Vue是一套用于構建用戶界面的漸進式JavaScript框架。這篇文章整理了vue中的常用知識點，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
在項目vue中使用echarts的操作步驟
這篇文章主要介紹了在項目vue中使用echarts的操作步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vite打包拆分js和css的配置指南
這篇文章主要給大家介紹了關于vite打包拆分js和css的配置指南,Vite是一個非常快速的工具,它可以幫助你打包JavaScript文件,需要的朋友可以參考下
2023-09-09
VUE實現大轉盤抽獎
營運三寶(九宮格、大轉盤、老虎機，當然此三寶當然是最基礎的營銷運營手段)，本片文章聊聊大轉盤，轉盤的實現邏輯應該是營銷方案較為簡單的一種了，本文將介紹如何實現大轉盤抽獎，感興趣的朋友可以參考下
2021-05-05
three.js實現vr全景圖功能實例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過一點全景相關的項目,下面這篇文章主要給大家介紹了關于three.js實現vr全景圖功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-05-05
webpack + vue 打包生成公共配置文件（域名）方便動態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名）方便動態(tài)修改,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
淺談VUE防抖與節(jié)流的最佳解決方案(函數式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
如何在Vue項目中使用axios請求
這篇文章主要介紹了如何在Vue項目中使用axios請求，對Vue感興趣的同學，可以參考下
2021-05-05
Vue實現DOM元素拖放互換位置示例
本文主要介紹了Vue實現DOM元素拖放互換位置示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-01-01
基于Vue實現tab欄切換內容不斷實時刷新數據功能
在項目開發(fā)中遇到這樣需求，就是有幾個tab欄，每個tab欄對應的ajax請求不一樣，內容區(qū)域一樣，內容為實時刷新數據，實現方法其實很簡單的，下面小編給大家?guī)砹嘶赩ue實現tab欄切換內容不斷實時刷新數據功能，需要的朋友參考下吧
2017-04-04