ElementUI实现多图片上传及回显功能

ElementUI实现多图片上传及回显功能

上传页面代码块

<el-upload
   :action="上传到后端的URL"<!--如：http://localhost:8080/api/uploadImgs  -->
   list-type="picture-card"
   :before-upload="beforeAvatarUpload"
   :on-success="handleSuccess"
   :on-remove="handleRemove"
   :multiple="false"
   :file-list="imgFileList" <!-- 这是回显图片的必要参数 -->
   :show-file-list="true"
   :limit="limitImg"
   :on-exceed="handleExceed"
 >
   <i class="el-icon-plus"></i>
   <img width="100%" :src="dialogImageUrl" alt="" />
 </el-upload>

data中的参数

data() {
      return {
		multiple: true,
		dialogImageUrl: '',//如果只是显示一张图片的话，可以直接对其赋值
        dialogVisible: false,
        imgFileList: [],//图片回显时使用
        limitImg: 4, //限制图片上传的数量
        columns: [
          {
            slot: 'imgPath',
            prop: 'imgPath',
            label: '图片',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ]
	}
}

这里是table页上显示时使用的插槽写法

		<!--  图片显示      -->
        <template slot="imgPath" slot-scope="scope">
          <img :src="http://localhost:8080/api/uploadImgs/20230419_4ec9954f858a4b04b6045dc005ed7cda.png" min-width="50" height="50" />
        </template>

上传所需的methods方法

beforeAvatarUpload(file) {
        const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
        const imgSize= file.size / 1024 / 1024 < 5;

        if (!imgType ) {
          this.$message.error('图片只能是 JPG/PNG 格式!');
        }
        if (!imgSize) {
          this.$message.error('图片大小不能超过 5MB!');
        }
        return imgType && imgSize;
      },
      handleSuccess(res, file, fileList) {
        if (res.code === 0) {
          //这里写上传成功后的处理逻辑，如果存在修改的话可以将图片的uid、name等存下，
          //待handleRemove有移除的话，就可以将对应不存在的图片移除
        }
      },
      handleRemove(file, fileList) {
        //如果是修改的话，可以将移除的图片uid、name记录下来。
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制最多可以上传${this.limit}个文件`);
      }

后端代码的实现

	//获取配置文件中的图片上传地址
	@Value("${config.Path}")
    String uploadImgPath;
    
    @PostMapping(value = "/uploadImg",produces = "application/json;charset=UTF-8")
    public Result uploadImg(@RequestParam("file") MultipartFile[] multipartFiles, HttpServletRequest request) throws IOException {
    	//这里的路径一定要是相对路径，不能是绝对路径，不然前端请求是无法回显的。
        //前端传递的文件上传的路径(这里看具体需要，地址可以前端传也可以后端直接取配置文件中配置的地址)
        String uploadPath = uploadImgPath+ File.separator + "vehicleImages" + File.separator;
        List<String> imgNameList = new ArrayList<>();
        for (MultipartFile file : multipartFiles) {
            if (file.isEmpty()) {
                return ResultUtils.fail("传递的文件为空，文件上传失败！");
            }
            //文件大小不超过5M-->前端代码中也有对应的限制，个人建议后端这里也再约束下。
            if (!UploadFileUtils.checkFileSize(file.getSize(), 5, "M")) {
                return ResultUtils.fail("文件大小不能超过5M");
            }
            // 获取文件名称,包含后缀
            String fileName = file.getOriginalFilename();
           //避免文件名字重复
            String uuid = UUID.randomUUID().toString().replaceAll("\\-", "");
            //获取文件后缀
            String suffix = fileName.substring(fileName.lastIndexOf("."));
            //重命名后的文件名
            fileName = uuid + suffix;
            imgNameList.add(uploadPath+fileName);
            //上传文件
            UploadFileUtils.fileupload(file.getBytes(), uploadPath, fileName);
        }
        String imgPathList = String.join("&&", imgNameList);
        return ResultUtils.successWithObject(imgPathList);
    }

后端UploadFileUtils工具类方法

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
/**
 * @Author: TianYi
 * @Description: TODO
 * @Version: 1.0
 */
public class UploadFileUtils {

    /**
     * 通过该方法将在指定目录下添加指定文件
     *
     * @param file     文件的二进制
     * @param filePath 文件路径
     * @param fileName 文件名
     * @throws IOException
     */
    public static void fileupload(byte[] file, String filePath, String fileName) throws IOException {
        //目标目录
        File targetfile = new File(filePath);
        if (!targetfile.exists()) {
            targetfile.mkdirs();
        }
        //判断后缀名是否为允许的后缀名
        if (checkFile(fileName.substring(fileName.lastIndexOf(".")))) {
            //二进制流写入
            FileOutputStream out = new FileOutputStream(filePath + fileName);
            out.write(file);
            out.flush();
            out.close();
        }
    }

    /**
     * 判断文件大小
     *
     * @param len  文件长度
     * @param size 限制大小
     * @param unit 限制单位（B,K,M,G）
     * @return
     */
    public static boolean checkFileSize(Long len, int size, String unit) {
        double fileSize = 0;
        if ("B".equals(unit.toUpperCase())) {
            fileSize = (double) len;
        } else if ("K".equals(unit.toUpperCase())) {
            fileSize = (double) len / 1024;
        } else if ("M".equals(unit.toUpperCase())) {
            fileSize = (double) len / 1048576;
        } else if ("G".equals(unit.toUpperCase())) {
            fileSize = (double) len / 1073741824;
        }
        if (fileSize > size) {
            return false;
        }
        return true;
    }


    /**
     * 判断是否为允许的上传文件类型,true表示允许
     */
    private static boolean checkFile(String suffix) {
        //设置允许上传文件类型
        String suffixList = "jpg,png,bmp,jpeg,ico,xls,doc,ppt,txt,zip,pdf,tar";
        // 获取文件后缀
        suffix = suffix.substring(1);
        if (suffixList.contains(suffix.trim().toLowerCase())) {
            return true;
        }
        return false;
    }
}