怎么使用vue+element-plus实现上传图片、回显问题及数量限制

这篇文章主要介绍“怎么使用vue+element-plus实现上传图片、回显问题及数量限制”，在日常操作中，相信很多人在怎么使用vue+element-plus实现上传图片、回显问题及数量限制问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用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实现上传图片、回显问题及数量限制”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！