@{
    Layout = "_UserLayout";
}
<div id="upload">
    <h3>上传使用协议</h3>

    <form enctype="multipart/form-data">
        <div class="form-group">
            <label for="name">描述业务用途<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>：</label>
            <input type="text" v-model="describe" class="form-control" id="name" placeholder="请描述业务用途">
        </div>
        <div class="form-group">
            <label for="xieyi">上传使用协议<span class="glyphicon glyphicon-asterisk" style="color:red;"></span>：</label>
            <input type="file" id="xieyi" name="xieyi" accept="image/*">
            <p class="help-block">上传签订的安全使用协议书 <a href="http://zip.juip.com/%E4%BD%BF%E7%94%A8%E5%8D%8F%E8%AE%AE%E4%B9%A6.zip">下载使用协议样板</a></p>
        </div>
        <div class="form-group">
            <label for="yewu">上传业务视频：</label>
            <input type="file" id="yewu" name="yewu" accept="video/wmv, video/avi, video/mp4, video/flv, video/3gp, video/mov, video/mkv, video/vob">
            <p class="help-block">上传涉及我方产品的业务视频</p>
        </div>
    </form>
    <div class="row">
        <div class="col-md-1">
            <button v-on:click="upload_file()" class="btn btn-new ">提交</button>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
	    el:'#upload',
	    data:{
            describe:'',
	    },
        created:function(){

        },
	    methods:{
            upload_file() {

                var xieyi = document.getElementById("xieyi").files[0];
                
                if (this.describe.length < 2) {
                    alert("业务描述必须填写！");
                    return;
                }
                if (!xieyi) {
                    alert("协议文件必须上传！");
                    return;
                }
                
                var form_data = new FormData();
                form_data.append('cookie',document.cookie);
                form_data.append('describe',this.describe);
                form_data.append('xieyi',xieyi);
                form_data.append('yewu',document.getElementById("yewu").files[0]);
                
                $.ajax({
                    type: 'POST',
                    url: 'http://juip.wyk/tencent/index/upload',
                    dataType: "json",
                    async:false,
                    contentType:false,//如果请求参数是FormData 必须设置 contentType请求头为false
                    processData:false,//如果请求参数是FormData 必须设置 processData请求头为false
                    data: form_data,
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        alert(res.msg);
                    }
                });
            }
	    }
	});
</script>