uniapp+springboot 实现单文件上传功能

今天在uniapp+springboot开发时遇到了单文件上传的问题，本文章向大家介绍uniapp+springboot上传单个文件，主要包括uniapp+springboot上传单个文件使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

springboot后端：

Service层：
//修改用户(参数user中必须带参数phone) 注：用户头像修改时前端应有form-data类型，名为image的字段"
public int updateUser(User user, MultipartFile image,HttpServletRequest request) throws IOExc    eption{
        //获取服务器运行地址并加上upload文件路径
        String path = request.getServletContext().getRealPath("/upload/");
        saveFile(image,"D:/SoftWorkSpace/master-goose/src/main/resources/static/"); //测试阶段path写死，方便测试
        user.setHeadImg("/"+image.getOriginalFilename());
        return userMapper.updateUserByPhone(user);
    }
    //文件上传的保存文件
 public void saveFile(MultipartFile img,String path) throws IOException {
        File dir = new File(path);
        if(!dir.exists()){
            dir.mkdir();
        }
        File file = new File(path+img.getOriginalFilename()); //编写代码时path可以写死
        img.transferTo(file);
}

Controller层：
//修改用户(参数user中必须带参数phone,可修改非关键用户信息如：用户名，性别，生日，邮箱和用户头像)
@PostMapping("/user")
@ApiOperation("修改用户(参数user对象中必须带参数phone,可修改非关键用户信息如：" +
            "用户名，性别，生日，邮箱和用户头像) 注：用户头像修改时前端应有form-data类型，名为image的字段")
public int updateUser(User user, MultipartFile image, HttpServletRequest request) throws IOException {
      return userService.updateUser(user,image,request);
}

uniapp前端：

View：
<template>
    <view class="container">
        <view>上传文件</view>
        <button type="primary" @click="uploadFile">点击上传文件</button>
    </view>
</template>

JS:
<script>
    export default {
        data() {
            return {
                fileName:"xxx.jpg"
            }
        },
        
        methods: {
            uploadFile(){
                var _this=this;
                uni.chooseImage({
                    success(res) {
                        console.log(res)
                        var tempFilePath=res.tempFilePaths;
                        uni.uploadFile({
                            url:'http://localhost:8080/user', //自己的后端接口（默认发送post请求）
                            filePath:tempFilePath[0],
                            name:"image",  //这里应为自己后端文件形参的名字
                            formData:{
                                "fileName":_this.fileName //其他属性
                            },
                            
                            success(res) {
                                console.log(res.data)
                            }
                        })
                    }
                })
            }
        }
    }
</script>

总结：

uniapp的uni.request请求是以字节流的方式请求后端，无法实现文件上传功能，因此应该使用uniapp内置的API -- uni.uploadFile实现文件上传其中方法中其他的form-data也可以在上传中传递给后端，uni.uploadFile提交的表单属性自动将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。