用vue保存上传的图片文件对象

 HTML页面：

<table class="form" id="form">
    ...略
    <tr>
    <td class="formTitle">头像图片</td>
    <td class="formValue">
        <input class="change" type="file" @change="handleFileChange" ref="inputer" isvalid="yes"/>
    </td>
    </tr>
    <tr>
        <td></td>
        <td id="showHptPic">
        <!-- 置入默认头像，如果有上传过头像，则显示自己的头像图片 -->
        <img id='pic' src='/images/touxiang-default_icon.png'>
        </td>
    </tr>
    ...略
</table>

 表单里选择图片文件，并预览，表单填完后和其他信息一起点确认，提交，提交方法在vue里

JS文件：

//只贴出关键代码
var vm = new Vue({
    el:'#dpLTE',
    data: {
        UploadFile: {
            file: null,//保存从html传来的图片文件
            relatedId:null,//数据库中与外表连接的Id
            relatedType:1 //1类型 为上传头像图片
        }
    },
    methods : {
            //选择文件后，预览图片
        handleFileChange (e) {
            let inputDOM = this.$refs.inputer;
            // 通过DOM取文件数据
            this.UploadFile.file = inputDOM.files[0];
            var objUrl = this.getObjectURL(this.UploadFile.file) ; //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl) {
                $("#pic").attr("src", objUrl) ; //将图片路径存入src中，预览出图片
            }
        },

 //建立一个可存取到该file的url
        getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        },
    acceptClick: function() {
        //图片文件不为空时,上传图片
        if(vm.UploadFile.file!=null && vm.UploadFile.relatedId!=null){
        //这里也是搞了我很久，参数传不过去,查了很久才知道：携文件和属性传参需要使用formData
		var formData = new FormData();
		formData.append('file',vm.UploadFile.file);
		formData.append('relatedType',vm.UploadFile.relatedType);
		formData.append('relatedId',vm.UploadFile.relatedId);
		$.ajax({
			url :  '../../public/uploadFile/upload?_' + $.now(),
			type : "post",
			processData : false,//告诉jQuery不要去处理发送的数据 
			contentType : false,// 告诉jQuery不要去设置Content-Type请求头
			data :formData,
			success: function(){
				console.log("上传头像成功！");
			}
		});
    }
})

1）首先选择文件后会触发  handleFileChange (e)  方法，通过给img的src赋值，来预览你选中的图片文件

2）点击确定的时候，先验证文件是否已选择、和外键关联的Id是否为空（我这的id可以理解为user表的id，与之对应的relatedId），如果未选中文件或者id为空，则不上传文件只保存表单填写的其他信息

3）new一个formData，用来存储上传的文件file（file类型）、文件类型relatedType（int类型）、外键关联Id  relatedId（String类型），然后用ajax把数据一起丢给controller的upload方法，保存到数据库，

存这个文件的相对路径：uploads/xxx001.jpg

                         文件名：xxx.jpg

                     文件类型：1（1为头像）

                         外键Id：1（user表id为1的用户）

还可以存上传时间、备注、图片类型啊啥的...

 

注意不要漏写processData : false,//告诉jQuery不要去处理发送的数据 
                     contentType : false,// 告诉jQuery不要去设置Content-Type请求头

否则会报错或者接收不到传过去的值

 

emmmm，直接丢到大牛写好的工具里，上传成功！

方法名：

@RequestMapping(value="upload" ,method=RequestMethod.POST)
public JSONObject upload(HttpServletRequest request, HttpServletResponse response, MultipartFile file, int relatedType, String relatedId){