【若依框架实现上传文件组件】

若依框架中只有个人中心有上传图片组件,但是这个组件不适用于el-dialog中的el-form表单页面

于是通过elementui重新写了一个上传组件,如图是实现效果

vue代码

复制代码
<el-dialog :title="title" v-model="find" width="600px" :close-on-click-modal="false" :draggable="true" append-to-body>
       <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="用户名称" prop="nickName">
               <el-input v-model="form.nickName" placeholder="请输入用户名称" maxlength="30" :disabled="true" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="登录密码" prop="password">
               <el-input v-model="form.password" placeholder="请输入登录密码" type="password" maxlength="20" :disabled="true" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :lg="2" :md="2">
             <el-form-item label="上传照片">
               <div class="custom-upload">
                 <el-upload
                     class="upload-demo"
                     action="#"
                     style="width: 200px"
                     :on-change="handleFileChange"
                     :file-list="fileList"
                     :auto-upload="false"
                     accept="image/*"
                     :disabled="true"
                 >
                   <!-- 上传按钮 -->
                   <el-button slot="trigger" type="primary" :disabled="true">
                     选择文件
                     <el-icon class="el-icon-upload" v-model="form.avatar"></el-icon>
                   </el-button>
                 </el-upload>
                 <!-- 图片预览 -->
                 <img v-if="previewImage" :src="previewImage" alt="Preview" style="max-width: 100%; margin-top: 10px;">
               </div>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
     </el-dialog>

js代码

复制代码
<script setup name="User">
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.avatar=response.imgUrl
          })
          .catch(error => {
            console.error('上传失败:', error);
          });
    };
  }
  fileList.value = [file];
}

</script >
相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~8 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama