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

　　组件库

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

　　常用的属性介绍：

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

　　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：

　　: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"

　　>

　　3.css：

　　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上传图片及回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: