vue项目上传文件以 file: (binary)形式上传

r囧r小猫 2022-12-28 08:13 342阅读 0赞

vue项目 上传文件以 file: (binary)形式上传，如下图片所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

关于解决这个问题，有两个步骤  
1，修改Content-Type属性值,小编写的如下：在headers里面封装

headers: {
    			'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
    		}

2，在传输的文件中使用FormData

file是你获取的文件，

const formData = new FormData();
     formData.append("file",file)

3，将formData传给接口即可，本案例如下：

uploadSelfCompanyLogo(formData).then(res =>{
                        if (res.code === 0) {
                            this.companyInfo.logo = res.filename;
                            this.companyInfo.imageUrl = res.url;
                            this.imageUrl = res.url;
                            // this.handleCrop(file);
                        } else {
                            this.$message.error('上传出错');
                        }
                    })

接口封装如下：

export function uploadSelfCompanyLogo(data) {
    	return request({
    		url: '/business/pub/iface/uploadCompanyLogo',
    		method: 'POST',
    		data:data,
    		headers: {
    			'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
    		}
    	})
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221120/72968daeb6f94dab8e1d9316ba2ae31f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，342人围观）

还没有评论，来说两句吧...

相关阅读

相关 JMeter——上传下载项目——单个文件上传

前提、完成登录功能; ![c24fd89c59829a412ead8bf11103dacc.png][] 然后再执行上传： ![1fa71329cbd7e11f6f8c8

àì夳堔傛蜴生んèń/ 2023年10月03日 17:09/ 0 赞/ 39 阅读

相关 vue项目上传文件以 file: (binary)形式上传

vue项目上传文件以 file: (binary)形式上传，如下图片所示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

r囧r小猫/ 2022年12月28日 08:13/ 0 赞/ 343 阅读

相关 VUE_vue使用axios上传文件，post上传文件，文件上传请求头

var formdata = new FormData(); for(var key in fileList){ //选择多文件使用循环遍历添加

た入场券/ 2022年12月07日 11:45/ 0 赞/ 351 阅读

相关【上传】Nginx 上传文件

本文包含知识点： > 1、nginx服务搭建 > > 2、nginx文件上传模块搭建 > > 3、文件重命名服务搭建 > > 3、nginx整体配置 > > 4、

浅浅的花香味﹌/ 2022年10月11日 12:14/ 0 赞/ 478 阅读

相关 vue + springboot 文件上传

vue + springboot 文件上传 @RequestMapping(value = "/import", produces = "application/js

「爱情、让人受尽委屈。」/ 2022年09月04日 14:46/ 0 赞/ 146 阅读

相关 Vue上传文件

Vue上传文件上传效果 ![M1KsQW5.jpg][] 上传类型这里的文件暂定义为：doc、docx、rar、zip、pdf、txt【这个

ゞ浴缸里的玫瑰/ 2022年04月17日 21:16/ 0 赞/ 289 阅读

相关 Spring上传文件(upload files)

前端实现：可以使用iView组件，实现文件的选择与上传，话不多说，直接上代码(注意，action中的路径及后端接收的路径，name即@RequestParam，通过nam

以你之姓@/ 2022年04月10日 04:29/ 0 赞/ 200 阅读

相关 input = file 实现上传文件

使用input = file实现文件上传功能，如果点击提交按钮，提交表单并上传选中的文件： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

待我称王封你为后i/ 2021年12月18日 15:53/ 0 赞/ 447 阅读

相关 vue-上传文件

<label for="exampleInputFile">头像</label> <img :src=" imgsrc != '' ? imgsrc :'../

妖狐艹你老母/ 2021年12月16日 12:04/ 0 赞/ 338 阅读

相关 vue 上传文件图片

<template> <div> <input class="choose_pic" type="file" name="ava

雨点打透心脏的1/2处/ 2021年09月17日 22:18/ 0 赞/ 487 阅读