vue+element-plus上传图片及回显问题及数量限制

 更新时间:2023年04月17日 08:36:43   作者:晓同哇哇~  
本文主要介绍了vue+element-plus上传图片及回显问题及数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

组件库

此篇可以完整帮助你解决编辑回显问题以及数量问题

常用的属性介绍:

首先hide_box: upload_btn是和css中的样式息息相关的  如果此值为true则隐藏上传图片功能,但是不影响已经上传过的图片,所以我们可以在一些独特的条件下让他改变值,比如:上传数量为3 limit 为上传图片的数量 这时我们上传了两个照片他的图片上传功能是不会显示的,如果在上传一个他就会消失

  • on-success为上传成功之后的操作可以配合limit 和hide_box: upload_btn  使用
  • action为请求的接口
  • name为接口所需的参数
  • before-remove为删除事件,这个删除事件需要加一些对fileList数组进行清空或删除的操作,因为他只是删除表面的图片
  • on-change为选择好照片之后的事件
  • file-list可以用来获取它的图片路径通常用在添加或者编辑回显的时候使用,当然也可以做一些更广泛的使用,这里不再一一介绍    说到回显这里有一个问题,我们在做项目的时候都会遇到这么一个问题点击编辑回显了但是照片无法正常显示,这是我们可以这么一搞就ok了
fileList.value.push({url:照片的路径})

但是有时候还会遇到一个问题,在照片没有改的情况下点击确认编辑了,然后照片就变成无法加载了,原因如下:

1.接口只需要一个简简单单的路径而已,因为刚才编辑回显我们在fileList数组里面加了一个对象和url,这是绝大多数会把整个数组放进去,所以可想而知不是后端想要的数据会报错,如果后端没有做拦截,那么返回的参数也不是上传图片功能所需数据格式,他要的是带有https的路径,所以无法加载,可以这样解决:添加图片的时候也加一个url,这时添加和编辑的时候数据都一样了,唯有路径可以发生变化,这个时候添加和确认编辑的时候直接fileList[0].url就ok了。问题解决。

2.我们可以声明两个数组,一个数组只放路径,编辑回显的时候在一个是数组里面push纯路径,上传编辑都用它,另一个就放对象url:路径只用于回显数据我们添加和删除的时候都对这个纯路径的数组进行操作就ok了,问题解决。

1.引入:

import { ElMessageBox } from "element-plus";

2.html:

          <p class="commodity_img">
            <!-- 上传图片 -->
            <el-upload
              :class="{ hide_box: upload_btn }"
              :on-success="handleSuccess"
              list-type="picture-card"
              :action="'/pcapi/File/fileimg'"
              :on-change="handleChanges"
              :before-remove="beforeRemove"
              :on-preview="handlePictureCardPreview"
              :file-list="fileList "
              multiple
              limit="1"
              name="img"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </p>

3.css:

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

4.js:

const upload_btn = ref(false);
const fileList = ref([]);
const handleSuccess = () => {
  // 上传成功后,隐藏上传按钮
  upload_btn.value = true;
};
const handleChanges = img => {
  if (img.status == "success") {
    fileList.value = img.response.front_file;
  }
};
// 删除
const beforeRemove = () => {
  const result = new Promise((resolve, reject) => {
    ElMessageBox.confirm("此操作将删除该图片, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        resolve();
        fileList.value = [];
        upload_btn.value = false;
      })
      .catch(() => {
        reject(false);
      });
  });
  return result;
};

到此这篇关于vue+element-plus上传图片及回显问题及数量限制的文章就介绍到这了,更多相关vue+element-plus上传图片及回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+axios实现post文件下载

    vue+axios实现post文件下载

    这篇文章主要为大家详细介绍了vue+axios实现post文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue使用数组splice方法失效,且总删除最后一项的问题及解决

    vue使用数组splice方法失效,且总删除最后一项的问题及解决

    这篇文章主要介绍了vue使用数组splice方法失效,且总删除最后一项的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue 实现单选框设置默认选中值

    vue 实现单选框设置默认选中值

    今天小编就为大家分享一篇vue 实现单选框设置默认选中值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3使用自定义hooks获取dom元素的问题说明

    vue3使用自定义hooks获取dom元素的问题说明

    这篇文章主要介绍了vue3使用自定义hooks获取dom元素的问题说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue弹出框组件封装实例代码

    vue弹出框组件封装实例代码

    这篇文章主要介绍了vue弹出框组件封装,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 如何正确快速使用Vue中的插槽和配置代理

    如何正确快速使用Vue中的插槽和配置代理

    这篇文章主要介绍了正确快速使用Vue中的插槽和配置代理的相关知识,插槽分为三种,分别是默认插槽、具名插槽、作用域插槽,下面分别列出了如何使用这三种插槽,需要的朋友可以参考下
    2023-01-01
  • 基于vue实现多功能树形结构组件的示例代码

    基于vue实现多功能树形结构组件的示例代码

    一个优雅展示树形结构数据的 Vue 组件,递归渲染每个节点及其子节点,支持自定义颜色、文本和布局,通过独特的样式巧妙处理不同层级,为用户打造丰富的视觉盛宴,文中通过代码给大家介绍的非常详细,感兴趣的同学可以自己动手尝试一下
    2024-02-02
  • vue项目中路径使用@和~的区别及说明

    vue项目中路径使用@和~的区别及说明

    这篇文章主要介绍了vue项目中路径使用@和~的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue  composition-api 封装组合式函数的操作方法

    vue  composition-api 封装组合式函数的操作方法

    在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数,这篇文章主要介绍了vue  composition-api 封装组合式函数的操作方法,需要的朋友可以参考下
    2022-10-10
  • VUE父组件异步获取数据,子组件接收的值为空的问题

    VUE父组件异步获取数据,子组件接收的值为空的问题

    这篇文章主要介绍了VUE父组件异步获取数据,子组件接收的值为空的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论