vue+element上传文件(图片/使用)和解析后端返回二进制文件(图片/视频) vue+element上传文件(图片

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到element进行文件的上传和二进制文件的解析,下面我来分享一下。
4.element图片上传,代码如下:

// template中代码如下: 文章图片

return 中代码如下:uploadimgurl: { // 主图 Mainpictureurl: "", // 主题内容 Mainimagecontenturl: "", // 视频 videourl: "", },

// methods中添加如下代码 onchangeMainpicture(file, fileList) { console.log(file); this.uploadimgurl.Mainpictureurl = file.raw; },

5.视频上传

// template代码

// return 代码如上

// methods方法如下: onchangevideo(file, fileList) { // console.log(event); // console.log(file); // console.log(fileList); this.uploadimgurl.videourl = file.raw; },

【vue+element上传文件(图片/使用)和解析后端返回二进制文件(图片/视频)】6.提交代码

async uploadpictures() { let formData = https://www.it610.com/article/new FormData(); const param = { itemMainId: this.$route.query.mainId, }; formData.append("param", JSON.stringify(param)); formData.append("main", this.uploadimgurl.Mainpictureurl); //主图 formData.append("images", this.uploadimgurl.Mainimagecontenturl); //主图内容 formData.append("images", this.uploadimgurl.Mainimagecontenturl); //主图内容 formData.append("images", this.uploadimgurl.Mainimagecontenturl); //主图内容 formData.append("images", this.uploadimgurl.Mainimagecontenturl); //主图内容 formData.append("video", this.uploadimgurl.videourl); //视频 await baduploadpictureupload(formData).then((res) => { console.log("我是上传主图的接口"); console.log(res); }); },

文章图片

7.解析二进制图片/视频,封装方法如下:

// 封装全局方法,存储文件 id /* 头像(0), 身份证正面(1),身份证反面(2),门店(10), 营业执照(11), 商品主档图(20), 商品主档视频(21), 商品主档内容(22), 商品图(30),图纸2D(31),图纸3D(32); */function getfilesid(value1) { let filesidobj = { id0: "",// 头像 id1: "",//身份证正面 id2: "",//身份证反面 id10: "",//门店 id11: "",//营业执照 id20: "",//商品主档图 id21: "",//商品主档视频 id22: "",//商品主档内容 id30: "",//商品图 id31: "",//图纸2D id32: "",//图纸3D } for (let key in value1) { console.log(key); console.log(value1[key]); switch (value1[key]) { case "0": filesidobj.id0 = key; break; case "1": filesidobj.id1 = key; break; case "2": filesidobj.id2 = key; break; case "10": filesidobj.id10 = key; break; case "11": filesidobj.id11 = key; break; case "20": filesidobj.id20 = key; break; case "21": filesidobj.id21 = key; break; case "22": filesidobj.id22 = key; break; case "30": filesidobj.id30 = key; break; case "31": filesidobj.id31 = key; break; case "32": filesidobj.id32 = key; break; default: break; } } return filesidobj; }

// 封装全局图片请求接口 // 导入图片接口 import { badlisttabledetailsfiles, //获取图片接口 badlisttabledetailsvideofiles, // 获取视频接口 } from "@/network/api"; // 公用图片请求接口 async function getfilesimg(id) { let getfilesimgres = []; await badlisttabledetailsfiles({ fileId: id, }).then((res) => { console.log("我是公用获取图片接口"); console.log(res); let reader = new FileReader(); reader.readAsDataURL(res); getfilesimgres.push(window.URL.createObjectURL(res)); return getfilesimgres; }); return getfilesimgres; }

// 公用视频请求接口 async function getfilesvideo(id) { let getfilesvideores = {} await badlisttabledetailsvideofiles({ fileId: id, }).then((res) => { console.log("我是公用获取视频接口"); console.log(res); // let reader = new FileReader(); // reader.readAsDataURL(res); // console.log(res); // this.filesvideo = window.URL.createObjectURL(res); // console.log(this.filesvideo); getfilesvideores = window.URL.createObjectURL( new Blob([res], { type: "application/octet-stream" }) ); return getfilesvideores; console.log(getfilesvideores); }); return getfilesvideores; }

7-1.请求接口封装

// 图片接口 export const badlisttabledetailsfiles = (value) => { return http1({ url: "/api/sys/image", method: "post", data: value, responseType: 'blob', }); }; // 视频接口 export const badlisttabledetailsvideofiles = (value) => { return http1({ url: "/api/sys/file", method: "post", data: value, responseType: 'arraybuffer', }); };

8.封装方法使用如下: