Vue图片上传转为二进制同时携带附带参数

  <el-upload

                                    class="upload-demo"

                                    :action="uploadUrl"

                                    :data="upLoadObj"

                                    name="file_upload"

                                    :show-file-list="false"

                                    :on-success="handleAvatarSuccess"

                                >

                                    <img

                                        v-if="imageUrl"

                                        :src="imageUrl"

                                        class="avatar"

                                        style="360px;height:184px;"

                                    />

                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                                </el-upload>

　　//参数

 　　　imageUrl: '',

            uploadUrl: this.$url + '/brand/upload/uploadFile',

            upLoadObj: {

                album_id: '0',

                file_type: '0',

                type: '1,2,3,4'

            },

 

 handleAvatarSuccess(res, file) {

            console.log(res, URL.createObjectURL(file.raw), 'handleAvatarSuccess');

            this.imageUrl = URL.createObjectURL(file.raw);

        },

 

 

<style scoped>

.avatar-uploader .el-upload:hover {

    border-color: #409eff;

}

.avatar-uploader-icon {

    font-size: 28px;

    color: #8c939d;

    text-align: center;

    line-height: 178px;

}

</style>

　　

        // 自定义上传图片
        upLoad(param) {
            let thiz = this;
            console.log(param, '自定义上传图片');
            let formData = new FormData();
            formData.append('album_id', '21'); // 额外参数
            formData.append('file_type', '0'); // 额外参数
            formData.append('type', '1,2,3,4'); // 额外参数
            formData.append('file_upload', param.file);
            let loading = thiz.$loading({
                lock: true,
                text: '上传中，请稍候...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            thiz.$axios.post('/brand/upload/uploadFile', formData).then(({ data }) => {
                console.log(data, 'res自定义上传图片');
                // imageUrl
                if (data.code == '1') {
                    this.$message({
                        message: data.message,
                        type: 'success'
                    });
                    this.imageUrl = 'https://upload.ishare-go.com/' + data.origin_file_name
                    console.log(this.imageUrl,'this.imageUrl')
                }
                // if (data.statusCode === 233) {
                //     thiz.$message('上传文件成功，' + data.message);
                //     thiz.formFileList = [];
                //     thiz.uploadFormFileList = [];
                // } else {
                //     thiz.formFileList = [];
                //     thiz.uploadFormFileList = [];
                //     thiz.$message('上传文件失败，' + data.message);
                // }
                loading.close();
            });
        },
        handleChange(file, fileList) {
            // this.fileList = fileList;
            console.log(file, fileList, 'file,fileList');
        },
        handleAvatarSuccess(res, file) {
            console.log(res, URL.createObjectURL(file.raw), 'handleAvatarSuccess');
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            return isJPG && isLt2M;
        }

　　

<style scoped>
.fs {
    font-size: 12px;
}
.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
.bgc {
    background-color: red;
    color: #fff;
}
.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 178px;
    text-align: center;
}
.avatar {
     178px;
    height: 178px;
    display: block;
}
</style>

　　====> 也可以用这个

 // 自定义上传图片
        upLoad(param) {
            let thiz = this;
            console.log(param, '自定义上传图片');
            let formData = new window.FormData();
            formData.append('album_id', '21'); // 额外参数
            formData.append('file_type', '0'); // 额外参数
            formData.append('type', '1,2,3,4'); // 额外参数
            formData.append('file_upload', param.file);
            let loading = thiz.$loading({
                lock: true,
                text: '上传中，请稍候...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };

            let instance = axios.create({
                baseURL: 'http://msmtest.ishare-go.com', //请求基地址
                // timeout: 3000,//请求超时时长
                // url: '/url',//请求路径
                // method: 'get,post,put,patch,delete',//请求方法
                headers: {
                    'Content-Type': 'multipart/form-data'
                } //请求头
                // params: {},//请求参数拼接在url上面
                // data: {},//请求参数放请求体里
            });

            instance.post('/brand/upload/uploadFile', formData, config).then(({ data }) => {
                console.log(data, 'res自定义上传图片');
                // imageUrl
                if (data.code == '1') {
                    this.$message({
                        message: data.message,
                        type: 'success'
                    });
                    this.imageUrl = 'https://upload.ishare-go.com/' + data.origin_file_name;
                    console.log(this.imageUrl, 'this.imageUrl');
                }
                // if (data.statusCode === 233) {
                //     thiz.$message('上传文件成功，' + data.message);
                //     thiz.formFileList = [];
                //     thiz.uploadFormFileList = [];
                // } else {
                //     thiz.formFileList = [];
                //     thiz.uploadFormFileList = [];
                //     thiz.$message('上传文件失败，' + data.message);
                // }
                loading.close();
            });
        },