问题

之前项目中前端使用了vue-cli，引入了上传组件，所以在上传文件时很容易，没有考虑太多问题。

image-cropper组件中有url属性，直接使用:url=”文件服务器地址”绑定上传的地址即可。

<el-form-item label="讲师头像">

   <!-- 头衔缩略图 -->
   <pan-thumb :image="teacher.avatar"/>
   <!-- 文件上传按钮 -->
   <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
   </el-button>

   <!-- v-show：是否显示上传组件 :key：类似于id，如果一个页面多个图片上传控件，可以做区分 :url：后台上传的url地址 @close：关闭上传组件 @crop-upload-success：上传成功后的回调 <input type="file" name="file"/> -->
   <image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey" :url="BASE_API+'/eduoss/fileoss'" field="file" @close="close" @crop-upload-success="cropSuccess"/>
</el-form-item>

解决

本次是用的是html基本页面，没有上传组件，那么文件需要自己获取。

<form autocomplete="off">
    <!--省略其他输入域……-->
    <div class="form-group">
        <input class="form-control" type="file" name="fileupload" @change="upLoadPicture($event)" v-model="member.avatar" accept="image/*">
        <i class="icon_images"></i>
    </div>
     <!--省略其他输入域……-->
    <div id="pass-info" class="clearfix"></div>
    <a href="#0" class="btn_1 gradient full-width">立即注册!</a>
</form>

let vm = new Vue({ 
   
        el: "#app",

        data() { 
   
            return { 
   
                member: { 
   
                    mobile: "",
                    password: "",
                    nickname: "",
                    avatar: "",
                    code: "",
                }
            }
        },
        methods: { 
   
            upLoadPicture(e) { 
   
                //获取文件
                let file = e.target.files[0]
                //将文件放入表单文件
                let formData = new FormData();
                formData.append('file', file);

                //上传文件
                axios.post("http://localhost:8004/oss/fileoss", formData)
                    .then(response => { 
   
                        alert("头像上传成功！")
                        //将返回的图片url赋值给member
                        vm.member.avatar=response.data.data.url
                    })
            }
        }
    })

@PostMapping
public R uploadOssFile(MultipartFile file){ 
   
    //获取文件
    //返回上传文件路径
    String url=ossService.uploadFileAvatar(file);
    return R.ok().data("url",url);
}

FormData对象的详解，https://www.jianshu.com/p/e984c3619019

主要两步：

使用@change和e.target.files[0]，获取我们添加的文件，
new FormData();并且 formData.append(‘file’, file); 需要将文件条件到FormData()表单对象中，否则后端的MultipartFile 类型获取不到file对象，就会报出java.lang.NullPointerException。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/184073.html原文链接：https://javaforall.net