vue+element上传多张图片和图片展示

前端：

文件上传使用el-upload

<el-upload
	:http-request="uploadProductPic"
	accept="image/*"
	list-type="picture-card"
	:on-preview="handleContImgPreview"
	:on-remove="handleContImgRemove"
	limit="5"
	:on-exceed="exceedTips"
	:file-list="productPicPathList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogContImgVisible" append-to-body>
<img width="100%" :src="dialogContImgUrl" />
</el-dialog>

:http-request：替代自动上传的action

accept：接受上传的文件类型

list-type：文件列表的类型

on-preview：点击文件列表中已上传的文件时的钩子

on-remove：移除以上次的文件

limit：限制上次的文件个数

:on-exceed：超出个数限制的回调

:file-list：文件列表名称

注：对于图片的显示有特定的json格式要求，直接返回到前端的list要封装成要求的json格式才可以正常的展示，json格式要求如下：

[
    {
        "name": "food.jpeg", 
        "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
    }, 
    {
        "name": "food2.jpeg", 
        "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
    }
]

文件预览使用el-dialog

<el-dialog :visible.sync="dialogContImgVisible" append-to-body>
<img width="100%" :src="dialogContImgUrl" />
</el-dialog>

js：

 //【内容图删除事件】
handleContImgRemove: function (file, fileList) {
   console.log(file, fileList);
   app.productPicList.remove(file.name);
},

//内容图数量限制3张
exceedTips: function () {
    this.$message.error('最多只能上传五张图片')
},

//【内容图片预览事件】
handleContImgPreview: function (file) {
    this.dialogContImgUrl = file.url;
    this.dialogContImgVisible = true;
},

//上传内容图
uploadProductPic: function (file) {
    console.log(file)
    var fd = new FormData();
    fd.append('file', file.file);

    var content = uploadPic(fd);
    app.productPicList.push(content.attachmentId);
},

//内容图上传前的大小 格式的校验
uploadProductPicBefore: function (file) {
    var fileType = file.type;
    var isJpg = false;
    if (fileType == 'image/jpeg' || fileType == 'image/png' || fileType == 'image/bmp') {
         isJpg = true;
    }
           
     if (!isJpg) {
         this.$message({
         message: '上传的图标只能是jpg、png、bmp格式!',
         type: 'warning'
      });
    }
   return isJpg;
},

//移除数组中的数据
Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) {
            return i;
        }
    }
    return -1;
}
Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
}

//上传图片
function uploadPic(data) {
    var result = "";
    $.utils.ajax(CTX + '/cmsProductController/uploadPic', {
        type: 'post',
        contentType: false,
        data: data,
        async: false,
        processData: false,
        success: function (res) {
            if (res.success) {
                result = res.data;
                app.$message({
                    message: res.msg,
                    type: 'success'
                });
            } else {
                app.$message({
                    message: res.msg,
                    type: 'warning'
                });
                return;
            }
        }
    });
    return result;
}

Java后端：

上传图片：

 public VcAttachmentDo uploadPic(MultipartFile file) throws BusinessException {
        //原文件名
        String fileName = file.getOriginalFilename();
        //文件扩展名
        String suffixName = fileName.substring(fileName.lastIndexOf(BaseEnum.EN_POINT.getCode()) + 1);
        //文件存储路径
        String filePath = prefix + File.separator + path;
        String resultPath = "";
        try {
        //上传图片进行路径的返回
            resultPath = UploadUtil.uploadImage(filePath, file, suffixName);
        } catch (Exception e) {
            throw new BusinessException(CmsContentEnum.UPLOAD_FAIL.getValue(), CmsContentEnum.UPLOAD_FAIL.getCode(), e);
        }
        //新建附件表的实体类
        VcAttachmentDo vcAttachmentDo = new VcAttachmentDo();
        vcAttachmentDo.setAttachmentId(UUIDUtil.get());
        vcAttachmentDo.setFileNameSrc(fileName);
        vcAttachmentDo.setFileExt(suffixName);
        vcAttachmentDo.setFileName(resultPath.substring(resultPath.lastIndexOf(BaseEnum.BACK_SLASH.getCode())));
        vcAttachmentDo.setFilePath(path + resultPath);
        vcAttachmentDo.setStatus(BaseEnum.NUM_ONE.getCode());
        //将数据插入到附件表中
        dao.insertSelective(VcAttachmentDo.class, vcAttachmentDo);
        //将展示路径进行拼接重新设置
        vcAttachmentDo.setFilePath(prefixPath + vcAttachmentDo.getFilePath());
        return vcAttachmentDo;
    }

上传图片的工具类：

 /**
     * 上传图片 没做限制，符合配置文件中大小的图片都可上传
     *
     * @param path
     * @param file
     * @param suffixName
     * @return
     * @throws IOException
     */
    public static String uploadImage(String path, MultipartFile file, String suffixName) throws IOException {
        //新文件夹 + 新文件名
        String newParentPath = DateUtil.dateToNoSplashString(new Date()) + File.separator;
        String filePath = newParentPath + UUIDUtil.get() + com.etom.vc.cms.utils.buenum.BaseEnum.EN_POINT.getCode() + suffixName;
        String savePath = path + File.separator + filePath;
        File saveFile = new File(savePath);
        if (!saveFile.getParentFile().exists()) {
            saveFile.getParentFile().mkdirs();
            saveFile.getParentFile().setReadable(true, false);
            saveFile.getParentFile().setExecutable(true, false);
            saveFile.getParentFile().setWritable(true, false);
        }
        byte[] data = file.getBytes();
        FileCopyUtils.copy(data, saveFile);
        saveFile.setReadable(true, false);
        saveFile.setWritable(true, false);
        saveFile.setExecutable(true, false);
        return (filePath).replaceAll(com.etom.vc.cms.utils.buenum.BaseEnum.FORWARD_SLASH.getCode(), com.etom.vc.cms.utils.buenum.BaseEnum.BACK_SLASH.getCode());
    }

展示图片时：

新建一个图片json的格式的实体类


import java.io.Serializable;

/**
 * @Author 宸
 * @Date: Created by 2019/1/4
 * @Desc:
 */
public class ImageListVo implements Serializable {

    /**
     * 图片名称
     */
    private String name;

    /**
     * 图片地址
     */
    private String url;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

查询数据：


public CmsProductVo getCurrentProduct(CmsProductVo cmsProductVo) {
List<CmsProductVo> cmsProductVoList = dao.find("cms.product.mapper.getCurrentProduct", cmsProductVo);
cmsProductVo = cmsProductVoList.get(0); 
if (StringUtils.isNotBlank(cmsProductVo.getProductPic())) {
    //用逗号将字符串分开，得到字符串数组
    String[] strs = cmsProductVo.getProductPic().split(",");
    //将字符串数组转换成集合list
    List list = Arrays.asList(strs);
    //查询图片集合的路径地址
    List<VcAttachmentDo> pathList = dao.find("cms.product.mapper.find", list);
    //new一个list对象对数据进行添加
    List list1 = new ArrayList();
    for (int i = 0; i < pathList.size(); i++) {
        ImageListVo imageListVo = new ImageListVo();
        imageListVo.setUrl(prefixPath + pathList.get(i).getFilePath());
        imageListVo.setName(pathList.get(i).getAttachmentId());
        list1.add(imageListVo);
    }
    //将附件表中的主键插入到实体对象中，用于移除图片和限制张数使用
    cmsProductVo.setProductPicList(list);
    //将图片地址插入到需要的实体的类对象中
    cmsProductVo.setProductPicPathList(list1);
}
return cmsProductVo;
}

前端将查询出来的数据的result对象中的productPicPathList赋值给:file-list文件列表的显示名称即可展示

vue+element上传多张图片和图片展示

猜你喜欢