关于图片上传(Base 64)

关于图片上传(Base 64)

本人初学者：仅记录工作中的需求功能

1.第一步关于表单

<el-form-item label="佐证材料">
    <el-upload
        ref="upload"
        :class="{ disabledImg: item.jobFile != '' ? true : false }"
        list-type="picture-card"
        action=""
        accept=".jpg, .png"
        :on-preview="handlePictureCardPreview"
        :on-remove="(file, fileList)=>{handleRemove(file, fileList, item)}"
        :limit="1"
        :auto-upload="false"
        :file-list="item.fileList"
        :on-change="(file, fileList) => {changeFile(file, fileList, item)}"
        :disabled="inputshow"
    >
    <i class="el-icon-plus"></i>
    <div class="el-upload__tip" slot="tip">上传1张图片，只能上传jpg/png文件，且不超过5MB</div>
    </el-upload>
    <el-image-viewer
        v-if="dialogVisible"
        :url-list="[dialogImageUrl]"
        :on-close="closeViewer"
    />                 
</el-form-item>

2.引入预览组件

components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
},
//在data中定义jobFile，fileList为预览

3.方法

    //图片预览功能
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        console.log("图片",this.dialogImageUrl);
    },
    // 关闭查看器
    closeViewer() {
        this.dialogVisible = false
    },
    //删除图片功能
    handleRemove(file, fileList, item){
        this.$nextTick(() => {
            item.jobFile=""
            document.querySelector('.el-upload--picture-card').style.display = 'block';
        });
        console.log(file, fileList,item);
    },
    // 文件状态改变时的钩子
    changeFile(file, fileList,value) {
      console.log("!!!!!!!!",file, fileList,value)
      let imgSize = Number(file.size / 1024 / 1024);
 
      if (imgSize > 5) { 
        this.$msgbox({
          title: "",
          message: "文件大小不能超过5MB,请重新上传。",
          type: "warning",
        });
        value.fileList.splice(value.index, 1)//不符合条件的图片，要清空
        console.log("fileList", value.fileList.splice(value.index, 1));
        return;
      } 

      fileList.forEach(async item => {
        const img = await this.getBase64(item.raw);
        value.jobFile = img
        document.querySelector('.el-upload--picture-card').style.display = 'none';
      });
      console.log("value",value)

    },
    // 图片转Base64
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let imgBase64 = '';
        reader.readAsDataURL(file);
        reader.onload = () => {
          imgBase64 = reader.result;
        };
        reader.onerror = error => reject(error);
        reader.onloadend = () => resolve(imgBase64);
      });
    },

4.关于样式问题[因为只上传1张图片，当有值时，将上传的组件隐藏]

<style scoped lang="scss">
::v-deep .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
}
.disabledImg {
    ::v-deep .el-upload--picture-card{
        display: none;
    }
}
</style>

<style>
/* el-image-viewer的样式 */
.el-image-viewer__wrapper {
  z-index: 2050 !important; /* 设置一个较低的z-index值，确保被弹窗覆盖 */
}
</style>

5.当你修改/查看图片的时候

this.$refs.personGroup.formGroup.formGroupList[0].fileList = [{url:data.jobFile}]