【若依框架实现上传文件组件以及下载文件到本地】

若依框架中只有个人中心有上传图片组件，但是这个组件不适用于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="false"
                 >
                   <!-- 上传按钮 -->
                   <el-button slot="trigger" type="primary" :disabled="false">
                     选择文件
                     <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 >

上面的是单图片上传，接下来是多图片上传组件
先看效果图

点击预览图标

点击删除图标则移除图片

<template>
  <div style="display: flex; align-items: center;">
    <div class="custom-upload"
         style="width: 800px; height: 300px;margin-top: 2%;margin-left: 10%;background-color: #ffffff;">
      <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="handleRemove"
          :on-preview="handlePictureCardPreview"
          multiple
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible" :title=title>
        <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 700px;height: 400px"/>
      </el-dialog>

    </div>
</template>

js方法

<script setup>
import { ref, onMounted, watch } from 'vue';
import { uploadImg } from "@/api/system/user"; //这是个人中心上传照片的接口，可以直接拿过

const isShow = ref(true)

const fileList = ref([]);
const disabled = ref(false);
const dialogImageUrl = ref('')
const title = ref('')
const dialogVisible = ref(false)

/** 处理文件改变事件 */
async function handleFileChange(files) {
  const selectedFiles = Array.isArray(files) ? files.map(file => file.raw) : [files.raw];
  for (const selectedFile of selectedFiles) {
    const reader = new FileReader();
    reader.readAsDataURL(selectedFile);
    reader.onload = async () => {
      const imageUrl = reader.result;
      fileList.value.push({
        url: imageUrl,
        name: selectedFile.name,
        status: 'finished',
        response: { url: imageUrl }
      });

      const formData = new FormData();
      formData.append('avatarfile', selectedFile);

      try {
        const response = await uploadImg(formData);
        console.log('上传成功:', response.imgUrl);
      } catch (error) {
        console.error('上传失败:', error);
      }
    };
  }
}

//删除方法
function handleRemove(file, fileList) {
  console.log('移除', file, fileList)
  fileList.value = fileList
}
//预览方法
const handlePictureCardPreview = function (file) {
  dialogImageUrl.value = file.url;
  title.value = file.name;
  dialogVisible.value = true;
}

</script>

实现上传新的文件覆盖旧文件，保持只有一个文件

/** 处理文件改变事件 */
async function handleFileChange(file, newFileList) {

  const selectedFile = file.raw;
    const reader = new FileReader();
    reader.readAsDataURL(selectedFile);
    reader.onload = async () => {
      const imageUrl = reader.result;

      if (newFileList.length > 1) {	//实现上传新的文件覆盖旧文件，保持只有一个文件
        newFileList.splice(0, 1);
      }

      // 添加新文件
      fileList.value.push({
        url: imageUrl,
        name: selectedFile.name,
        status: 'finished',
        response: { url: imageUrl }
      });

      const formData = new FormData();
      formData.append('avatarfile', selectedFile);

      try {
        const response = await uploadMediaVideo(formData);
        //console.log('上传成功:', response.imgUrl);
        // url.value = url.value + qianzhui.value + response.imgUrl + ',';
        url.value = url.value + qianzhui.value + response.imgUrl + ',';
        inputList.value.push(url.value + response.imgUrl);
        //console.log(url.value)
      } catch (error) {
        console.error('上传失败:', error);
      }
    };
}

调用若依后台通用下载文件接口，实现浏览器下载服务器文件到本地

<script setup>
const url = ref( 'http://localhost/dev-api/common/download/resource?resource=')		//这是若依框架后端接口已有的方法
const input = ref('')

/** 处理文件改变事件 */
async function handleFileChange(file, newFileList) {
  const selectedFile = file.raw;
    const reader = new FileReader();
    reader.readAsDataURL(selectedFile);
    reader.onload = async () => {
      const imageUrl = reader.result;
      if (newFileList.length > 1) {
        newFileList.splice(0, 1);
      }
      // 添加新文件
      fileList.value.push({
        url: imageUrl,
        name: selectedFile.name,
        status: 'finished',
        response: { url: imageUrl }
      });
      dragValue.value = false
      const formData = new FormData();
      formData.append('avatarfile', selectedFile);

      try {
        const response = await uploadEXTENSION(formData);
        //console.log('上传成功:', response.imgUrl);
        input.value = response.imgUrl		//这里拿到的是上传成功后的文件路径地址
      } catch (error) {
        console.error('上传失败:', error);
      }
    };
}

//只需要写一个方法调用下载接口，后面参数带上文件路径地址即可
function download(){
	window.open(url.value + input.value, '_blank');	//这里就会打开一个新窗口弹出文件下载窗口
}


</script>