快捷導(dǎo)航

elementui上傳圖片回顯功能實(shí)現(xiàn)

更新時(shí)間：2023年07月18日 11:06:04 作者：不完美女孩-

這篇文章主要介紹了elementui上傳圖片回顯,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

elementui上傳圖片回顯

<el-upload
  class="avatar-uploader"
    ref="otherLicense"
    action
    :auto-upload="false"
    :on-preview="handlePicPreview"
    :on-remove="handleRemove"
    :file-list="form.fileList"
    :limit="imgLimit"
    :on-change="otherSectionFile"
    list-type="picture-card"
    multiple
  >
  <i class="el-icon-plus"></i>
</el-upload>
<!-- 上傳圖片放大 -->
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

data中

// 業(yè)務(wù)結(jié)束證明材料
 let validateImage = (rule, value, callback) => {
    // console.log(this.AddDateModel.fileId);
    //驗(yàn)證器
    if (this.AddDateModel.fileId.length <= 0) {
      //為true代表圖片在  false報(bào)錯(cuò)
      callback(new Error("請(qǐng)上傳業(yè)務(wù)結(jié)束證明材料"));
    } else {
      callback();
    }
  };
AddDateModel: {
 fileId:[]
},
// 回顯圖片的路徑
photoList: [{ url: "" }],
// 放大圖片的路徑
dialogImageUrl: "",
// 上傳圖片放大彈出框
dialogVisible: false,
imgLimit: 9, //最多可上傳幾張圖片
AddDateRules: {
 fileId: [
    { required: true, validator: validateImage, trigger: "blur" },
  ],
},

methods中

 handlePicPreview(file) {
  this.dialogImageUrl = file.url;
   this.dialogVisible = true;
 },
 // 業(yè)務(wù)申請(qǐng)材料
 handleRemove(file, fileList) {
   this.AddDateModel.fileId.map((item, index) => {
     if (item.uid == file.uid) {
       this.AddDateModel.fileId.splice(index, 1);
     }
   });
 },
 otherSectionFile(file) {
   const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
   const isJPG = typeArr.indexOf(file.raw.type) !== -1;
   const isLt20M = file.size / 1024 / 1024 < 20;
   if (!isJPG) {
     this.$message.error("只能是圖片!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   if (!isLt20M) {
     this.$message.error("上傳圖片大小不能超過(guò) 20MB!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   this.otherFiles = file.raw;
   // FormData 對(duì)象
   var formData = new FormData();
   // 文件對(duì)象
   formData.append("file", this.otherFiles);
   formData.append("filePath", "yuanchengyiliao");
   let config = {
     headers: {
       "Content-Type": "multipart/form-data",
     },
     methods: "post",
   };
   // 調(diào)取接口  上傳參數(shù)
   this.$axios.hosUpload(formData, config).then((res) => {
     // console.log(file)
     let result = res.data.data;
     let arr = [];
     for (let i = 0; i < result.length; i++) {
       // console.log(result[i])
       arr.push(result[i].pictureId);
     }
     file.pictureId = arr.join("||");
     this.AddDateModel.fileId.push(file);
     // console.log(this.AddDateModel.fileId);
   });
 },

顯示數(shù)據(jù)的方法中

async bussEdit(row) {
 //調(diào)取接口然后把數(shù)據(jù)傳到photoList中，我只上傳一張圖片，就直接寫(xiě)，上傳多張的，循環(huán)就好了。
 this.photoList[0].url = 圖片路徑;
},
// 回顯
fileCoList: [], //圖片回顯
if (row.fileId) {
 // console.log(row.fileId)
  let imgss = [];
  let imgLen = row.fileId.split(",");
  for (let i = 0; i < imgLen.length; i++) {
    imgss.push(imgLen[i]);
  }
  // console.log(imgss.join(','))
this.$nextTick(() => {
  this.$refs.addinmanfill.getFile(imgss.join(","));
});
} else {
    this.$nextTick(() => {
  this.$refs.addinmanfill.getFile('');
  });
}
watch: {
fileCoList: {
    deep: true,
    handler() {
      if (this.fileCoList) {
        this.AddDateModel.fileId = this.fileCoList;
      }
    },
  },
},
async getFile(ids) {
let idsdata = _qs.stringify({
  ids: ids,
});
let res = await this.$axios.sysgetFile(idsdata);
//   console.log(res.data.data);
let result = res.data.data;
result.map((item) => {
  // console.log(item)
  item.url = this.GLOBAL.BASE_URL + item.url;
  item.pictureId = item.id;
});
// console.log(result)
this.fileCoList = result;
},

到此這篇關(guān)于elementui上傳圖片回顯的文章就介紹到這了,更多相關(guān)elementui上傳圖片回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: