vue如何使用element實(shí)現(xiàn)上傳圖片和修改圖片功能

本篇內(nèi)容主要講解“vue如何使用element實(shí)現(xiàn)上傳圖片和修改圖片功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue如何使用element實(shí)現(xiàn)上傳圖片和修改圖片功能”吧!

一、應(yīng)用場景

1.上傳圖片并進(jìn)行放大預(yù)覽

2.圖片上傳代碼

我這里的實(shí)現(xiàn)是直接將圖片上傳到接口，成功后返回圖片路徑，表單提交時(shí)，后臺要路徑拼成的字符串格式，類似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg’;下面會介紹路徑處理方法

		<el-upload
            :action="上傳圖片接口地址"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="imgSuccess"
            :on-error="imgError"
            :on-remove="imgRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

 // 上傳成功
    imgSuccess(res, file, fileList) {
      this.fileList = fileList;
      //這里我是用一個(gè)fileList數(shù)組存取，當(dāng)保存的時(shí)候進(jìn)行圖片路徑處理
    },
    // 上傳失敗
    imgError(res) {
      this.$message({
        type: "error",
        message: "附件上傳失敗",
      });
    },

    // 刪除圖片
    imgRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 附件上傳圖片預(yù)覽事件，這個(gè)就是將路徑直接放進(jìn)一個(gè)彈窗顯示出來就可以了

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 處理圖片路徑
    setImgUrl(imgArr) {
      let arr = [];
      if (imgArr.length>0) {
        for (let i = 0; i < imgArr.length; i++) {
        const element = imgArr[i];
        arr.push(element.response.data.url);
        //這個(gè)地方根據(jù)后臺返回的數(shù)據(jù)進(jìn)行取值，可以先打印一下
      }
      return arr.join();
      } else {
        return ''
      }
      
    },

二、修改已經(jīng)上傳的圖片，并展示到圖片列表中

1.效果展示（先展示原來的圖片，再上傳新圖片，也可刪除原來的圖片）

2.編輯代碼

1.編輯組件代碼

		<el-upload
            :action="上傳圖片接口地址"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="imgSuccess1"
            :on-error="imgError1"
            :on-remove="imgRemove1"
            :file-list="fileList2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

2.處理獲取到的圖片路徑，并進(jìn)行處理展示到列表

 // 表格編輯按鈕
    tableBianji(row) {
      this.changeTanchuang = true;
      this.changeId = row.id;
      let form = { id: row.id };
      let _this = this;
      //這是 我自己封裝的方法，不用理會，只看圖片路徑處理即可
      this.request("url", "GET", form, function (res) {
        if (res.code == 1) {
          _this.changeTanchuangForm = res.data;
          //將字符串轉(zhuǎn)成數(shù)組
          let arr = _this.changeTanchuangForm.up_file.split(",");
          for (let i = 0; i < arr.length; i++) {
          //創(chuàng)建對象，并將路徑進(jìn)行ip地址拼接
            let obj = {      
              url: _this.requestUrl + arr[i],
            };
            //放進(jìn)圖片列表
            _this.fileList2.push(obj);
          }
         
        } else {
          _this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },

3.編輯圖片插件的方法

fileList1 用來放插件變化的圖片路徑

// 刪除圖片
    imgRemove1(file, fileList) {
      this.fileList1 = fileList;
    },
    // 上傳成功
    imgSuccess1(res, file, fileList) {
      this.fileList1 = fileList;
    },
    // 上傳失敗
    imgError1(res) {
      this.$message({
        type: "error",
        message: "附件上傳失敗",
      });
    },

4.獲取最后列表存在的圖片（上傳兩張新的圖片后，進(jìn)行打印的this.fileList1）

// 先判斷圖片是否更改
          if (this.fileList1.length==0) {
          //如果為0，則表示沒有對圖片進(jìn)行編輯，則不用更改任何東西
          } else {
          //圖片進(jìn)行了一些操作，包括刪除、新增；
            let arr = [];
            // 判斷是否是新上傳的
            this.fileList1.map((item,index)=>{
              if (item.response) {
              //是新上傳的，將路徑放進(jìn)數(shù)組
                arr.push(item.response.data.url)
              } else {
              //原來存在的，將路徑進(jìn)行截取后放進(jìn)數(shù)組
                let str = '/uploads'+item.url.split('/uploads')[1];
                arr.push(str)
              }

            })
          //處理后的路徑字符串
          let up_file = arr.join(',')
          }

到此，相信大家對“vue如何使用element實(shí)現(xiàn)上傳圖片和修改圖片功能”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！