组件上传图片不回显问题
import { Plus } from "@element-plus/icons-vue";
// 图片上传
const img_add = ref([]);
function httpRequest_add(option) {let dataForm = new FormData();dataForm.append("file", option.file);dataForm.append("id", user.data.id);axios({url: "",//你的图片上传接口method: "post",data: dataForm,headers: {// 设置请求头token: user.data.token,id: user.data.id}}).then(res => {console.log(res);// 表单校验ruleForm.avatar = res.data.data.id;// 回显图片img_add.value.push({url: res.data.data.url});});
}
html:
<el-upload :http-request="httpRequest_add" multiple :show-file-list="true"
limit="1" :file-list="img_add" :class="{ hide_box: img_add.length }" ref="uploadrefss"
v-model="rules.avatar" list-type="picture-card"><el-icon><Plus /></el-icon>
</el-upload>
关键一步:
img_add.value.push({
url: res.data.data.url //你要回显的图片路径
});