泉州大型网站设计公司,企业为什么要上市,内蒙古建设工程交易中心网站,微网站好制作吗若依框架中只有个人中心有上传图片组件#xff0c;但是这个组件不适用于el-dialog中的el-form表单页面
于是通过elementui重新写了一个上传组件#xff0c;如图是实现效果 vue代码
el-dialog :titletitle v-modelfind width600px…若依框架中只有个人中心有上传图片组件但是这个组件不适用于el-dialog中的el-form表单页面
于是通过elementui重新写了一个上传组件如图是实现效果 vue代码
el-dialog :titletitle v-modelfind width600px :close-on-click-modalfalse :draggabletrue append-to-bodyel-form :modelform :rulesrules refuserRef label-width80pxel-rowel-col :span12el-form-item label用户名称 propnickNameel-input v-modelform.nickName placeholder请输入用户名称 maxlength30 :disabledtrue //el-form-item/el-col/el-rowel-rowel-col :span12el-form-item label登录密码 proppasswordel-input v-modelform.password placeholder请输入登录密码 typepassword maxlength20 :disabledtrue //el-form-item/el-col/el-rowel-rowel-col :lg2 :md2el-form-item label上传照片div classcustom-uploadel-uploadclassupload-demoaction#stylewidth: 200px:on-changehandleFileChange:file-listfileList:auto-uploadfalseacceptimage/*:disabledtrue!-- 上传按钮 --el-button slottrigger typeprimary :disabledtrue选择文件el-icon classel-icon-upload v-modelform.avatar/el-icon/el-button/el-upload!-- 图片预览 --img v-ifpreviewImage :srcpreviewImage altPreview stylemax-width: 100%; margin-top: 10px;/div/el-form-item/el-col/el-row/el-formtemplate #footerdiv classdialog-footerel-button typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/template/el-dialogjs代码
script setup nameUser
import { uploadImg } from /api/system/user; //这是个人中心上传照片的接口可以直接拿过来用const previewImage ref();
const fileList ref([]);const data reactive({form: {},
});const { form } toRefs(data);/** 处理文件改变事件 */
function handleFileChange(file) {const selectedFile file.raw;if (selectedFile) {const reader new FileReader();reader.readAsDataURL(selectedFile);reader.onload () {previewImage.value reader.result;const formData new FormData();formData.append(avatarfile, selectedFile);uploadImg(formData).then(response {console.log(上传成功:, response.imgUrl);// 如果需要其他操作可以在这里进行处理form.value.avatarresponse.imgUrl}).catch(error {console.error(上传失败:, error);});};}fileList.value [file];
}/script
