Element-ui Upload 图片上传

           <el-form-item label="身份证图片">
          <el-upload
            class="upload"
            :class="{ hide: hideUp }"
            :action="getUploadUrl"
            list-type="picture-card"
            :limit="1"
            accept="image/*"
            :on-success="handleUpSuccess"
            :on-error="handleUpError"
            :on-change="handleUpUpload"
            :on-preview="handleUpPreview"
            :on-remove="handleUpRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
           //图片预览组件
          <viewer-dialog ref="viewer" :images="imagesUp"></viewer-dialog>
    </el-form-item>

      

hideUp:false,初始化定义为false.

imagesUp：'',预览图片的路径也要初始化为空。

         //---------------------------身份证正面上传
    handleUpSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.ruleForm.cardUpImg = response.data[0];
        this.imagesUp = response.data;
        this.hideUp = fileList.length == 1;
        this.$message.success(response.msg);
      }
    },
    handleUpError(err, file, fileList) {},
    // 删除图片
    handleUpRemove(file, fileList) {
      this.ruleForm.cardUpImg = "";
      this.imagesUp = [];
      this.hideUp = false;
    },
    // 预览图片
    handleUpPreview(file) {
      this.$refs.viewer.handleDialog(true);
    },
    // 上传图片
    handleUpUpload(file, fileList) {
      this.hideUp = true;
    },
      

参考文件pages/admin/views/producerManagement/producerQueryAdd.vue 的身份证正面上传