vue中实现文件的上传

1.封装上传的axios请求

import axios from 'axios'

export const http = {
    get: (url, params = {}) => {
        let pname = window.location.pathname.split("/")[1]
        if (process.env.NODE_ENV == "production") {
            url = '/' + pname + url
        }else{
            url = '/DreamWeb' + url
        }
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url: url,
                dataType: "json",
                crossDomain: true,
                cache: false,
                data: params
            }).then(res => {
                resolve(res)
            }).catch(error => {
                reject(error)
            })
        })
    },
    post: (url, params = {}) => {
        let pname = window.location.pathname.split("/")[1]
        if (process.env.NODE_ENV == "production") {
            url = '/' + pname + url
        }else{
            url = '/DreamWeb' + url
        }
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url: url,
                dataType: "json",
                crossDomain: true,
                cache: false,
                data: params
            }).then(res => {
                resolve(res)
            }).catch(error => {
                reject(error)
            })
        })
    },
    upload: (url, formData) => {
        let pname = window.location.pathname.split("/")[1]
        if (process.env.NODE_ENV == "production") {
            url = '/' + pname + url
        }else{
            url = '/DreamWeb' + url
        }
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url: url,
                dataType: "json",
                crossDomain: true,
                cache: false,
                headers: {
                    'Content-type': 'multipart/form-data'
                },
                data: formData
            }).then(res => {
                resolve(res)
            }).catch(error => {
                reject(error)
            })
        })
    },

}

2.使用

file参数是一个二进制的流

async uploadBpmn2(params) {
            if(params.data.fileType && params.data.fileType.length>0){
                let formData = new FormData();
                formData.append("file", params.file);
                formData.append("fileType", params.data.fileType)
                console.log(formData);
                let res = await this.$http.upload("/ctrl/expertRegistration/uploadImage", formData)
                if (res.data && res.data.code == "200") {
                    let attValueText = ""
                    switch (params.data.fileType) {
                        case 6:
                            attValueText = "学历学位"
                            break;
                        case 7:
                            attValueText = "技术职称"
                            break;
                        case 8:
                            attValueText = "荣誉证书"
                            break;
                        case 9:
                            attValueText = "执业或执业资格证书"
                            break;
                        default:
                            break;
                    }
                    let fileMsg = {
                        "id": this.getRandomString(),
                        "name":params.file.name,
                        "infoId": null,
                        "attValue": params.data.fileType,
                        "attValueText": attValueText,
                        "filePath": "",
                        "base64": null,
                        "attValue": params.data.fileType,
                    }
                    fileMsg = Object.assign(fileMsg, res.data.data)
                    this.edArr[params.data.index].fileList.push(fileMsg)
    
                }
            }else{
                this.$message.error('请选择证书类型后上传');
            }
        },