模版区：
<el-upload v-model:file-list="fileList" action="上传图片的路径" list-type="picture-card" :on-preview="handlePictureCardPreview" //预览 :on-remove="handleRemove" //移除 :on-success="handleSuccess" //上传成功 :on-change="handleChange" //发生改变 name="img" :limit="5" //limit代表上传文件的数量 >
要注意这个name="img"，这个name是上传的文件字段名，根据后台结束的参数名进行修改，
它的默认值是file
然后下面是事件
先声明一个数组跟模版区进行绑定
const fileList = ref([]);
const handleRemove = (uploadFile, uploadFiles) => { console.log(uploadFile, uploadFiles); console.log(fileList, 'file'); }; const handlePictureCardPreview = (uploadFile) => { console.log(uploadFile); console.log(fileList, 'file'); dialogImageUrl.value = uploadFile.url; }; const handleChange = (e) => { console.log(e); }; //上传成功后路径在成功事件里返回，进行相对应的赋值即可 const handleSuccess = (img) => { console.log(img); console.log(fileList, 'file'); if (img.status == 1) { ruleForm.img = img.front_file; } };
其次就是编辑回显的时候
上传图片的组件默认的数组是在上面绑定的
在拿到路径后往数组里push路径即可实现回显，因为是数组所以要push ,只要路径对即可回显，还有一种可能是路径只有一半，这个时候就需要自己拼接一下，
fileList.value.push({ img:'接口的前缀'+'返回的路径' })
