共计 4415 个字符，预计需要花费 12 分钟才能阅读完成。
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. 封装办法应用如下:
// 获取文件 id
let 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. 本期的分享到了这里就完结拉, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。
正文完