模版区:
<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:'接口的前缀'+'返回的路径'
})