el-upload照片墙自定义上传多张图片(手动一次性上传多张图片)包含图片回显,删除

需求:el-upload照片墙自定义上传多张图片(手动一次性上传多张图片)包含图片回显,删除,预览,在网上看了很多,都没有说怎么把数据转为file格式的,找了很久最终实现,

难点:怎么把接口获取到的图片转为file格式,如果不是file格式的话,那么后端无法识别,并且还要携带额外的参数

1.调用接口获取已上传图片,格式如下

获取到数据后,进行回显(调用接口我就不写了,我只写数据获取到后转为file格式)

fileImgList:用于照片回显

process.env.VUE_APP_SERVE:这个是全局的,公司地址,比如https://xx.cn,如果图片显示不出来,可以问后端要不要拼接其他,可以在浏览器测试

以下这俩个方法,直接复制,把参数对好就能转为file,格式是[FILE]

imageToBase64:图片转base64

base64ToFile:base64转File

that.formInline.files:用于存储file格式图片

javascript 复制代码
  query() {
            if (files.length > 0) {
                files.forEach((item) => {
                    this.fileImgList.push({
                        url: process.env.VUE_APP_SERVE + '/files' + item.path,
                        name: item.originalname
                    });
                    var image = new Image();
                    image.crossOrigin = '';
                    image.src = process.env.VUE_APP_SERVE + '/files' + item.path; // 'https://xx.cn' + item
                    const that = this;
                    image.onload = function () {
                        const base64 = that.imageToBase64(image); // 图片转base64
                        const file = that.base64ToFile(base64, item.path); // base64转File
                        that.formInline.files.push(file);
                    };
                });
            }
        },
        imageToBase64(img) {
            var canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
            var dataURL = canvas.toDataURL('image/jpeg' + ext);
            return dataURL;
        },
        base64ToFile(urlData, fileName) {
            const arr = urlData.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bytes = atob(arr[1]); // 解码base64
            let n = bytes.length;
            const ia = new Uint8Array(n);
            while (n--) {
                ia[n] = bytes.charCodeAt(n);
            }
            return new File([ia], fileName, { type: mime });
        }

2.删除已上传图片

直接复制,这个是删除[FILE,FILE]的图片

javascript 复制代码
 handleRemove(file) {
            // 从列表中删除当前的图片
            var that = this;
            try {
                var delname = file.url.split('/');
                that.formInline.files = that.formInline.files.filter((ele) => {
                    var name = ele.name.split('/');
                    return name[name.length - 1] !== delname[delname.length - 1];
                });
                console.log(that.formInline.files);
            } catch (error) {}
        }

3.上传图片

上传图片的change事件,每次上传成功把file.raw给files,注意!!file.raw就是后端需要的file格式的图片

javascript 复制代码
    OnChange(file, fileList) {
      const isType = file.type === "image/jpeg" || "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isType) {
        this.$message.error("上传图片只能是 JPG 格式!");
        fileList.pop();
      }
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过 5MB!");
        fileList.pop();
      }
      this.formInline.files.push(file.raw);
    },

4.上传多张图片并且携带额外参数

注意!!这边如果要传数组,需要先转换为json格式再发给后端

javascript 复制代码
        async setCompanySubmit() {
            let formData = new FormData(); //  用FormData存放上传文件
            this.formInline.files.forEach((file, index) => {
                formData.append('files', file);
            });
            let { name, tel, truename, id } = this.formInline;
            formData.append('name', name);
            formData.append('tel', tel);
            formData.append('truename', truename);
            formData.append('id', id);
            const res = await Api_setCompany(formData);
            if (res.code == 200) {
                this.$message.success('成功!!!');
                this.unitDialogVisible = false;
                this.fileImgList = [];
                this.$refs.uploadCompanyRef.clearFiles();
            }
        }

上传参数如下,有多个files文件

5.完整代码(仅作参考,需要根据实际情况修改)

javascript 复制代码
<template>
    <div>
        <el-upload
            action="#"
            list-type="picture-card"
            multiple
            :on-remove="handleRemove"
            :on-change="OnChange"
            :file-list="fileImgList"
            :auto-upload="false"
            ref="uploadCompanyRef"
        >
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,最多上传5张且单张图片不超过5M</div>
        </el-upload>
        <el-button type="primary" size="default" @click="setCompanySubmit()">上传</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileImgList: [],
            formInline: {
                files: [],
                name: '',
                id: 0
            }
        };
    },
    mounted() {
        this.query();
    },
    methods: {
        query() {
            if (files.length > 0) {
                files.forEach((item) => {
                    this.fileImgList.push({
                        url: process.env.VUE_APP_SERVE + '/files' + item.path,
                        name: item.originalname
                    });
                    var image = new Image();
                    image.crossOrigin = '';
                    image.src = process.env.VUE_APP_SERVE + '/files' + item.path; // 'https://xx.cn' + item
                    const that = this;
                    image.onload = function () {
                        const base64 = that.imageToBase64(image); // 图片转base64
                        const file = that.base64ToFile(base64, item.path); // base64转File
                        that.formInline.files.push(file);
                    };
                });
            }
        },
        imageToBase64(img) {
            var canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
            var dataURL = canvas.toDataURL('image/jpeg' + ext);
            return dataURL;
        },
        base64ToFile(urlData, fileName) {
            const arr = urlData.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bytes = atob(arr[1]); // 解码base64
            let n = bytes.length;
            const ia = new Uint8Array(n);
            while (n--) {
                ia[n] = bytes.charCodeAt(n);
            }
            return new File([ia], fileName, { type: mime });
        },
        handleRemove(file) {
            // 从列表中删除当前的图片
            var that = this;
            try {
                var delname = file.url.split('/');
                that.formInline.files = that.formInline.files.filter((ele) => {
                    var name = ele.name.split('/');
                    return name[name.length - 1] !== delname[delname.length - 1];
                });
                console.log(that.formInline.files);
            } catch (error) {}
        },
        OnChange(file, fileList) {
            console.log(file, fileList, '多选情况下传参');
            const isType = file.type === 'image/jpeg' || 'image/png';
            const isLt5M = file.size / 1024 / 1024 < 5;
            if (!isType) {
                this.$message.error('上传图片只能是 JPG 格式!');
                fileList.pop();
            }
            if (!isLt5M) {
                this.$message.error('上传图片大小不能超过 5MB!');
                fileList.pop();
            }
            this.formInline.files.push(file.raw);
        },
        async setCompanySubmit() {
            let formData = new FormData(); //  用FormData存放上传文件
            this.formInline.files.forEach((file, index) => {
                formData.append('files', file);
            });
            let { name, tel, truename, id } = this.formInline;
            formData.append('name', name);
            formData.append('tel', tel);
            formData.append('truename', truename);
            formData.append('id', id);
            const res = await Api_setCompany(formData);
            if (res.code == 200) {
                this.$message.success('成功!!!');
                this.unitDialogVisible = false;
                this.fileImgList = [];
                this.$refs.uploadCompanyRef.clearFiles();
            }
        }
    }
};
</script>

<style lang="scss" scoped></style>

6.照片墙效果

文章到此结束,希望对你有所帮助~

相关推荐
前端拾光者2 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟4 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_1817901448020 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟22 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光26 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用26 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网43 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
Dola_Pan44 分钟前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs44 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj1234567891 小时前
JDK1.8新增特性
java·开发语言