关于el-upload上传图片拿不到图片信息,无法删除问题

element admin添加对话框中 

上传图片后,执行插入操作,数据库中没有图片信息,

使用:on-success="handleUploadSuccess"绑定方法 ,

上传成功后将你的表单图片字段赋值为文件的请求路径

上传图片后清除不了,使用 ref="upload"  

在方法中this.$refs.upload.clearFiles();获取el-upload,实现清空

<!--添加对话框-->
      <el-dialog
        :title="storeForm.storeId ? '修改门店' : '新增门店'"
        :visible.sync="dialogFormVisible"
        width="45%"
        :before-close="handleClose"
      >
        <el-form
          :model="storeForm"
          ref="storeForm"
          label-width="100px"
          :inline="true"
          class="demo-form-inline"
          :rules="editFormRules"
        >
          <div>
            <el-form-item label="门店图片:" prop="image">
              <el-upload
                action=" http://localhost:8888/admin/common/upload"
                list-type="picture-card"
                :auto-upload="true"
                ref="upload"
                v-model="storeForm.imgUrl"
                :on-success="handleUploadSuccess"
              >
                <!-- ref="upload"清空图片数组的-->
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
                图片大小不超过5M<br/>
            </el-form-item>
          </div>
     
          <el-form-item label="联系电话" prop="tel">
            <el-input
              v-model="storeForm.tel"
              style="width: 520px; padding-right: 200px"
            ></el-input>
          </el-form-item>

      </el-dialog>


      //表单
      storeForm: {
        storeId: 0,
        name: "",
        address: "福建省",
        admin: "",
        tel: "0591-88888888",
        detail: "",
        open: "",
        close: "",
        imgUrl: "",
      },

  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 上传成功后将 imgUrl 赋值为文件的请求路径
      this.storeForm.imgUrl = response.data;
    },
    handleRemove(file) {
      //获取el-upload,实现清空
      this.$refs.upload.clearFiles();
      this.$message.success("图片删除成功!");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值