怎么使用vue+element-plus實(shí)現(xiàn)上傳圖片、回顯問題及數(shù)量限制

這篇文章主要介紹“怎么使用vue+element-plus實(shí)現(xiàn)上傳圖片、回顯問題及數(shù)量限制”，在日常操作中，相信很多人在怎么使用vue+element-plus實(shí)現(xiàn)上傳圖片、回顯問題及數(shù)量限制問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用vue+element-plus實(shí)現(xiàn)上傳圖片、回顯問題及數(shù)量限制”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

常用的屬性介紹：

首先hide_box: upload_btn是和css中的樣式息息相關(guān)的  如果此值為true則隱藏上傳圖片功能，但是不影響已經(jīng)上傳過的圖片，所以我們可以在一些獨(dú)特的條件下讓他改變值，比如：上傳數(shù)量為3 limit 為上傳圖片的數(shù)量 這時(shí)我們上傳了兩個(gè)照片他的圖片上傳功能是不會顯示的，如果在上傳一個(gè)他就會消失

• on-success為上傳成功之后的操作可以配合limit 和hide_box: upload_btn  使用

• action為請求的接口

• name為接口所需的參數(shù)

• before-remove為刪除事件，這個(gè)刪除事件需要加一些對fileList數(shù)組進(jìn)行清空或刪除的操作，因?yàn)樗皇莿h除表面的圖片

• on-change為選擇好照片之后的事件

• file-list可以用來獲取它的圖片路徑通常用在添加或者編輯回顯的時(shí)候使用，當(dāng)然也可以做一些更廣泛的使用，這里不再一一介紹    說到回顯這里有一個(gè)問題，我們在做項(xiàng)目的時(shí)候都會遇到這么一個(gè)問題點(diǎn)擊編輯回顯了但是照片無法正常顯示，這是我們可以這么一搞就ok了

fileList.value.push({url:照片的路徑})

但是有時(shí)候還會遇到一個(gè)問題，在照片沒有改的情況下點(diǎn)擊確認(rèn)編輯了，然后照片就變成無法加載了，原因如下：

1.接口只需要一個(gè)簡簡單單的路徑而已，因?yàn)閯偛啪庉嫽仫@我們在fileList數(shù)組里面加了一個(gè)對象和url，這是絕大多數(shù)會把整個(gè)數(shù)組放進(jìn)去，所以可想而知不是后端想要的數(shù)據(jù)會報(bào)錯(cuò)，如果后端沒有做攔截，那么返回的參數(shù)也不是上傳圖片功能所需數(shù)據(jù)格式，他要的是帶有https的路徑，所以無法加載，可以這樣解決：添加圖片的時(shí)候也加一個(gè)url，這時(shí)添加和編輯的時(shí)候數(shù)據(jù)都一樣了，唯有路徑可以發(fā)生變化，這個(gè)時(shí)候添加和確認(rèn)編輯的時(shí)候直接fileList[0].url就ok了。問題解決。

2.我們可以聲明兩個(gè)數(shù)組，一個(gè)數(shù)組只放路徑，編輯回顯的時(shí)候在一個(gè)是數(shù)組里面push純路徑，上傳編輯都用它，另一個(gè)就放對象url：路徑只用于回顯數(shù)據(jù)我們添加和刪除的時(shí)候都對這個(gè)純路徑的數(shù)組進(jìn)行操作就ok了，問題解決。

1.引入：

import { ElMessageBox } from "element-plus";

2.html：

          <p class="commodity_img">
            <!-- 上傳圖片 -->
            <el-upload
              :class="{ hide_box: upload_btn }"
              :on-success="handleSuccess"
              list-type="picture-card"
              :action="'/pcapi/File/fileimg'"
              :on-change="handleChanges"
              :before-remove="beforeRemove"
              :on-preview="handlePictureCardPreview"
              :file-list="fileList "
              multiple
              limit="1"
              name="img"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </p>

3.css：

<style scoped>
.hide_box /deep/ .el-upload--picture-card {
  display: none;
}
</style>

4.js：

const upload_btn = ref(false);
const fileList = ref([]);
const handleSuccess = () => {
  // 上傳成功后，隱藏上傳按鈕
  upload_btn.value = true;
};
const handleChanges = img => {
  if (img.status == "success") {
    fileList.value = img.response.front_file;
  }
};
// 刪除
const beforeRemove = () => {
  const result = new Promise((resolve, reject) => {
    ElMessageBox.confirm("此操作將刪除該圖片, 是否繼續(xù)?", "提示", {
      confirmButtonText: "確定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        resolve();
        fileList.value = [];
        upload_btn.value = false;
      })
      .catch(() => {
        reject(false);
      });
  });
  return result;
};

到此，關(guān)于“怎么使用vue+element-plus實(shí)現(xiàn)上傳圖片、回顯問題及數(shù)量限制”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！