vue 前端传图片文件，后端接收

た入场券 2022-02-04 01:09 1006阅读 0赞

--------------------

### **vue端** ###

1、在 main.js 文件中添加

const upload = axios.create({
      //这里配置你自己的url
      baseURL: 'http://localhost:8096/reconciliation/',
      timeout: 50000,
    });
    Vue.prototype.$upload = upload;

2、在需要上传文件的vue文件中

uploadImg(file){
        var _this = this;
        var formData = new FormData();
        formData.append("file", file.raw);
        _this.$upload.post("file/upload", formData)
        	.then(res => {
    		    _this.$message(res.data.userInfo, 'success');
    	    }).catch(data=>{
    		    console.log(data);
    	    })
    }

3、在后台controller中

@RestController
    @RequestMapping("file")
    public class FileDataController {
        @RequestMapping(value = "/upload", method = RequestMethod.POST)
        public String handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
            // 将图片转为base64
            BASE64Encoder encoder = new BASE64Encoder();
            String imgData = encoder.encode(file.getBytes());
            String url = null;
            //这里要进行的图片操作
            return url1;
        }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 springboot后端接收前端传数组参数方法

1:：前端传数组参数用ids,不要用ids\[\],因为是传数组会自动加上\[\] @ApiOperation(value = "批量删除", notes = "

落日映苍穹つ/ 2024年03月27日 15:55/ 0 赞/ 8 阅读

相关 vue+SpringBoob前端往后端传时间

文章目录报错解决 -------------------- 报错在使用vue做编辑时，向后台传递日期报错 Field error in o

傷城~/ 2023年09月26日 17:52/ 0 赞/ 62 阅读

相关后端传验证码图片前端ajax怎么显示图片

后端传验证码图片前端,ajax怎么显示图片。验证码后端返给前端的是一张验证码的图片，如下： ![aaa902943c9a4576b4594bae82bcdd9d.png][]

朱雀/ 2023年09月23日 21:11/ 0 赞/ 87 阅读

相关 Vue前端接收后端返回的图片、验证码图片

[https://blog.csdn.net/qq\_43477721/article/details/106100824][https_blog.csdn.net_qq_43

柔光的暖阳◎/ 2022年11月11日 05:16/ 0 赞/ 108 阅读

相关 html里传输文件到后端,前端js上传文件到后端接收文件

packagecom.zj.sample;importjava.io.File;importjava.io.IOException;importjava.util.Iterat

超、凢脫俗/ 2022年10月06日 11:48/ 0 赞/ 215 阅读

相关 Vue实现多文件上传功能(前端 + 后端代码)

开发项目的时候，用到文件上传的功能很常见，包括单文件上传和多文件上传，上传各种类型的文件。在vue里面要实现多文件上传功能，还是很方便的。本文就一起来学习一下，如何把多文件

灰太狼/ 2022年09月04日 13:43/ 0 赞/ 955 阅读

相关 JAVA springMVC前端传参到后端和接收

例子一： var bean=new Object();//对象 bean.clientName='你好'; bean.st

╰+攻爆jí腚メ/ 2022年06月17日 06:43/ 0 赞/ 228 阅读

相关 SpringMVC前端传json后端用对象接收,后端传json给前端

ResponseBody和RequestBody @ResponseBody把后台pojo转换成json对象 @RequestBody接收前台json数据,把json数

浅浅的花香味﹌/ 2022年03月31日 11:18/ 0 赞/ 337 阅读

相关 vue 前端传图片文件，后端接收

-------------------- vue端 1、在 main.js 文件中添加 const upload = axios.create({

た入场券/ 2022年02月04日 01:09/ 0 赞/ 1007 阅读

相关 java后端导出excel文件流，前端vue接收下载

1.后端excel导出工具类主要依赖  <dependency>

港控/mmm°/ 2021年09月03日 09:09/ 0 赞/ 969 阅读