vue-upload上傳圖片詳細使用方法

更新時間：2023年05月23日 11:37:31 作者：-風過無痕

這篇文章主要介紹了使用vue-upload上傳圖片的詳細使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學習吧

前言

實際開發(fā)中我們的圖片，文件，PDF我們都應(yīng)該存在文檔服務(wù)器當中。從而優(yōu)化代碼，減少代碼文件大小。
我們可以讓后端把文檔服務(wù)器搭建好，寫好相應(yīng)的存儲接口api，我們就可以使用Upload組件上傳。
但是我們需要注意的是，在實際開發(fā)中。在請求攔截中設(shè)置的token，和userid（用戶id）要重新設(shè)置一次。
因為我們是使用upload組件直接上傳，并沒有經(jīng)過axios，攔截不到。要在headers（請求頭中設(shè)置2個參數(shù)）

代碼實現(xiàn)

1.在添加表單中使用upload組件（餓了嗎）

<el-form-item label="維保打印記錄:" prop="fileList">
            <!-- <el-input v-model="form.mcRecord" style="width: 350px"></el-input> -->
            <!-- list-type="picture" 上傳圖片的樣式 -->
            <el-upload
              class="upload-demo"
              :action="upload.url"
              :on-preview="handlePreview"
              :headers="upload.headers"
              :on-remove="handleRemove"
              :on-success="handleFileSuccess"
              :file-list="fileList"
              list-type="picture"
              :limit="10"
              :on-exceed="handleExceed"
            >
              <el-button size="small" type="primary">點擊上傳</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上傳jpg/png文件,且不超過500kb
              </div>
            </el-upload>
</el-form-item>

2.在data中設(shè)置參數(shù)

2.1fileList是上傳成功圖片存儲地方，是一個數(shù)組對象，我是直接轉(zhuǎn)換成數(shù)組字符串存在后端。

2.2url是當前連接的后端地址加上api地址

2.3headers是upload屬性，添加api請求頭中的token和tenant-id（用戶id）來驗證身份。

2.4getToken，getTenantId，是在utils中的方法，獲取token和用戶id的。

// 上傳圖片成功之后存儲地方
      fileList: [],
      // 圖片上傳地址，和請求頭數(shù)據(jù)
      upload: {
        // 設(shè)置上傳的請求頭部
        headers: { token: getToken(), "tenant-id": getTenantId() },
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + "/media/upload/coursefile",
      },

3.methods中的方法

為了方便查看，在點擊已經(jīng)上傳成功文件時，會動態(tài)的使用js在document創(chuàng)建一個img來展示圖片，方便查看。

// 文件上傳成功鉤子
    handleFileSuccess(response, file, fileList) {
      console.log("response", response);
      console.log("file", file);
      console.log("fileList", fileList);
      let x = {};
      x.name = response.filename;
      x.url = response.url;
      x.id = response.id;
      console.log("上傳圖片", x);
      this.fileList.push(x);
    },
    // 點擊已上傳文件右上角刪除鉤子
    handleRemove(file, fileList) {
      // console.log("id", file.id);
      console.log("刪除之后", fileList);
      // const x = this.fileList.findIndex((v) => v.id == file.id);
      // console.log("刪除下標", x);
      // this.fileList.splice(x, 1);
      this.fileList = fileList;
      console.log("處理過數(shù)據(jù)", this.fileList);
    },
    // 文件上傳數(shù)量超過設(shè)置數(shù)量
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能選擇10張圖片${fileList.length} 個文件`);
    },
    // 點擊文件列表中已上傳的文件時的鉤子
    handlePreview(file) {
      console.log(file);
      const image = new Image();
      image.src = file.url;
      image.onload = () => {
        // 創(chuàng)建彈出層
        console.log("執(zhí)行了");
        const previewContainer = document.createElement("div");
        previewContainer.style.position = "fixed";
        previewContainer.style.top = 0;
        previewContainer.style.bottom = 0;
        previewContainer.style.left = 0;
        previewContainer.style.right = 0;
        previewContainer.style.zIndex = 99999;
        previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
        previewContainer.style.display = "flex";
        previewContainer.style.justifyContent = "center";
        previewContainer.style.alignItems = "center";
        document.body.appendChild(previewContainer);
        // 在彈出層中添加圖片
        const previewImage = document.createElement("img");
        previewImage.src = file.url;
        previewImage.style.maxWidth = "80%";
        previewImage.style.maxHeight = "80%";
        previewContainer.appendChild(previewImage);
        // 點擊彈出層，關(guān)閉預(yù)覽
        previewContainer.addEventListener("click", () => {
          document.body.removeChild(previewContainer);
        });
      };
    },