关于vue.js:vueelement上传文件图片使用和解析后端返回二进制文件图片视频

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. 本期的分享到了这里就完结拉, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。