1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,咱们常常会应用到element进行文件的上传和二进制文件的解析,上面我来分享一下。
4.element图片上传,代码如下:
// template中代码如下:<el-upload list-type="picture-card" action="" :limit="1" :auto-upload="false" //要害 代码 :on-change="onchangeMainpicture" //文件上传时触发函数 > <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{ file }"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> <i class="el-icon-download"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span></span> </div></el-upload>return 中代码如下:uploadimgurl: { // 主图 Mainpictureurl: "", // 主题内容 Mainimagecontenturl: "", // 视频 videourl: "",},// methods中增加如下代码onchangeMainpicture(file, fileList) { console.log(file); this.uploadimgurl.Mainpictureurl = file.raw;},5.视频上传
// template代码<el-upload list-type="picture-card" :on-change="onchangevideo" action="" :limit="1" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{ file }"> <video :src="file.url" class="avatar" controls="controls"> </video> </div></el-upload>// return 代码如上// methods办法 如下:onchangevideo(file, fileList) { // console.log(event); // console.log(file); // console.log(fileList); this.uploadimgurl.videourl = file.raw;},6.提交代码
async uploadpictures() { let formData = 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.封装办法应用如下:
// 获取文件 idlet filesid = this.$Cmethods.getfilesid(this.filesimg);// 获取 对应id上面图片的地址let getfilesimg = await this.$Cmethods.getfilesimg(filesid.id20); //获取主档// 获取对应 id上面的视频地址let filesvideo = await this.$Cmethods.getfilesvideo(filesid.id21); //宝贝视频9.本期的分享到了这里就完结拉,心愿对你有所帮忙,让咱们一起致力走向巅峰。