javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > elementui上传图片

elementui上传图片回显功能实现

作者:不完美女孩-

这篇文章主要介绍了elementui上传图片回显,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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中

// 业务结束证明材料
 let validateImage = (rule, value, callback) => {
    // console.log(this.AddDateModel.fileId);
    //验证器
    if (this.AddDateModel.fileId.length <= 0) {
      //为true代表图片在  false报错
      callback(new Error("请上传业务结束证明材料"));
    } 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;
 },
 // 业务申请材料
 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("上传图片大小不能超过 20MB!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   this.otherFiles = file.raw;
   // FormData 对象
   var formData = new FormData();
   // 文件对象
   formData.append("file", this.otherFiles);
   formData.append("filePath", "yuanchengyiliao");
   let config = {
     headers: {
       "Content-Type": "multipart/form-data",
     },
     methods: "post",
   };
   // 调取接口  上传参数
   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);
   });
 },

显示数据的方法中

async bussEdit(row) {
 //调取接口然后把数据传到photoList中,我只上传一张图片,就直接写,上传多张的,循环就好了。
 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;
},

到此这篇关于elementui上传图片 回显的文章就介绍到这了,更多相关elementui上传图片 回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文