vue图片上传+预览+回显

vue

  <el-row>
 	   <el-col :span="12">
        <el-form-item label="身份证件照" prop="Identity_photo" required>
              <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview"
                  :class="{hasChs:form.Identity_photo!= ''}" accept="image/jpeg,image/png,image/jpg"
                  :on-remove="handleRemove" :on-change="handleChange" ref="refUpload" :file-list="fileList"
                  :auto-upload="false">
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且单个不超过10M</div>
                  <i class="el-icon-plus"></i>
              </el-upload>
           
            <el-dialog title="图片预览" :visible.sync="dialogVisible" :append-to-body="true" width="50%"
              :modal="false">
                      <div style="padding: 15px;">
                          <el-image style="display: flex;" :src="dialogImageUrl">
                          </el-image>
                      </div>
                  </el-dialog>

      </el-form-item>
           </el-col>
             </el-row>

属性

 data(){
 	return:{
 	 url: '',
     fileList: [],
      filesData: [
          [],               
      ],
      dialogVisible: false,
      dialogImageUrl: '',
   	  form:{
          Identity_photo: '', //身份证件照               
      },
      load:{
          Identity_photo: '', //身份证件照               
      },
	}
 }

方法

methods:{
	 //图片预览
	 handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
    },
    //删除上传的图片
    handleRemove(file, fileList) {
         this.fileList=[]
         this.form.Identity_photo = ''
         if (file.status == 'ready') {
             const self = this
             let reader = new FileReader()
             reader.readAsDataURL(file.raw)
             reader.onload = function(event) {
                 let img_base64 = reader.result;
                 self.filesData[0].forEach(item => {
                     if (item == img_base64) {
                         //删除指定元素
                         self.filesData[0].splice(0, 1)
                     }
                 })
             }
         }
     },
     //图片改变时触发
      handleChange(file, fileList) {
          // 检查文件类型
            const isImage = file.raw.type.includes("image");
            if (!isImage) {
                this.$message.error("上传文件类型必须是图片!");
                return false
            }
            // 检查文件大小
            if (file.size > (10 * 1024 * 1024)) {
                this.$message.error(`上传文件大小不能超过10Mb`);
                this.$refs['refUpload'].handleRemove(file);
                return false;
            }
            // 检查文件数量
            if (fileList.length > 1) {
                this.$message.error(`上传文件最大数量为1`);
                this.$refs['refUpload'].handleRemove(file);
                return false;
            }
            this.load.Identity_photo=''
            this.fileList.splice(0, 1, file);
            this.form.Identity_photo = '1'
            // 读取文件
            var _self = this;
            var reader = new FileReader();
            reader.readAsDataURL(file.raw);
            reader.onload = function(event) {
                _self.filesData[0].push({
                    file: reader.result,
                    filename: file.name,
                });
            };
            return true;
        },
}

上传

 如果有回显的上传就需要下方操作,如果不需要回显就直接上传可以把this.load.Identity_photo 相关的操作都删掉 因为这边上
 传的 是base64，如果直接拿回显上传会是图片的缓存路径，所以需要有判断如果原来的没改变就用回显过来的base64数据   		
 如果原来的改变了就用新上传的图片base64

   this.$post('/hsa-pss-cw/physician/info/savePhysician', Object.assign({}, this.form, {
       Identity_photo:this.load.Identity_photo=='' ? this.filesData[0][0].file : this.load.Identity_photo 
     })).then(res => {})

回显

//因为保存的是图片的base64,所以回显
 this.fileList.push( {name:'a.jpeg',url:res.data.data.Identity_photo})
 this.load.Identity_photo=res.data.data.Identity_photo

css

el-upload的组件上的:class="{hasChs:form.Identity_photo!= ''}"这一步操作主要是vue的组件原因，
 因为我只需要上传一张图片，做了限制,上传了一张，上传的标识【就是一个加号图标】还在就显的不好看了，
所以如果这个图片属性有值了就把这个【加图标加上这个样式隐藏】

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