做网站建网站,麦味旅行的网站建设需求分析,网站开发要用多少钱,包头移动官网网站建设需求#xff1a;el-upload照片墙自定义上传多张图片#xff08;手动一次性上传多张图片#xff09;包含图片回显#xff0c;删除#xff0c;预览#xff0c;在网上看了很多#xff0c;都没有说怎么把数据转为file格式的#xff0c;找了很久最终实现#xff0c; 难点el-upload照片墙自定义上传多张图片手动一次性上传多张图片包含图片回显删除预览在网上看了很多都没有说怎么把数据转为file格式的找了很久最终实现 难点怎么把接口获取到的图片转为file格式如果不是file格式的话那么后端无法识别并且还要携带额外的参数 1.调用接口获取已上传图片格式如下 获取到数据后进行回显调用接口我就不写了我只写数据获取到后转为file格式 fileImgList用于照片回显 process.env.VUE_APP_SERVE这个是全局的公司地址比如https://xx.cn如果图片显示不出来可以问后端要不要拼接其他可以在浏览器测试 以下这俩个方法直接复制把参数对好就能转为file格式是[FILE] imageToBase64图片转base64 base64ToFilebase64转File that.formInline.files用于存储file格式图片 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 itemconst that this;image.onload function () {const base64 that.imageToBase64(image); // 图片转base64const file that.base64ToFile(base64, item.path); // base64转Filethat.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]); // 解码base64let 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]的图片 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格式的图片 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格式再发给后端 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.完整代码仅作参考需要根据实际情况修改
templatedivel-uploadaction#list-typepicture-cardmultiple:on-removehandleRemove:on-changeOnChange:file-listfileImgList:auto-uploadfalserefuploadCompanyRefi classel-icon-plus/idiv classel-upload__tip slottip只能上传jpg/png文件最多上传5张且单张图片不超过5M/div/el-uploadel-button typeprimary sizedefault clicksetCompanySubmit()上传/el-button/div
/templatescript
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 itemconst that this;image.onload function () {const base64 that.imageToBase64(image); // 图片转base64const file that.base64ToFile(base64, item.path); // base64转Filethat.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]); // 解码base64let 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();}}}
};
/scriptstyle langscss scoped/style6.照片墙效果 文章到此结束希望对你有所帮助~
