解讀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、如果定義了，文件名字還是不顯示，在獲取數(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ā)送出去，

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

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

那么我們就用ajax來實現(xiàn)文件上傳吧??！

使用FormData.append()添加屬性

使用步驟

使用 Element-ui 中的el-upload 最終實現(xiàn)

通過 slot 你可以傳入自定義的上傳按鈕類型和文字提示?？赏ㄟ^設(shè)置limit和on-exceed來限制上傳文件的個數(shù)和定義超出限制時的行為?？赏ㄟ^設(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: