Vue上传文件遇到的问题

问题

之前项目中前端使用了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。