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

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.本期的分享到了这里就结束拉,希望对你有所帮助,让我们一起努力走向巅峰。