上传文件的方法

一、原生js

HTML部分

        <input type="file" id="upload-file" name="myfile" />

JS部分

        var xhr;
        var fileObj = document.getElementById("upload-file").files[0];
        var url = "地址";
        var form = new FormData();
        form.append("file",fileObj);
        form.append("groupId",$(groupId).val()); //添加其他参数
        form.append("seriesId",$(seriesId).val());
        xhr = new XMLHttpRequest();
        xhr.open('post',url,true);
        xhr.onload = "请求完成的方法";
        xhr.onerror = "请求失败的方法";
        xhr.send(form);

二、jquery方法

HTML部分

        <form action="" id="upload" enctype="multipart/form-data" method="post">
              <input type="file" name="file" id="upload-file"/>
        </form>

JS部分

        var form = document.getElementById("upload");
        var formData = new FormData(form);
        $.ajax({
            type:"post",
            url:"地址",
            data:formData,
            processData:false,
            contentType:false,
            success:function(res){
                ......
            }
        });

三、form方式

HTML部分

       <form action="地址" id="form" enctype="multipart/form-data" autocomplete="off" method="POST">
             <input class="input-text" id="upload-file" type="file"/>
             <input class="btn01" type="submit" value="提交"/>
       </form>

四、jquery.form.js

HTML部分

        <form id="form1" action="" enctype="multipart/form-data">
               姓名:<input name="name" id="name" class="specialFields"><br>
               年龄:<input name="age" id="age" type="number" class="specialFields"><br>
               <input type="button" value="提交" id="sub1">
        </form>

JS部分

         var obj = {
            "usercode":usercode,
            'alias':alias,
         }
         var options = {
            url :"地址",
            data:obj,
            type : "post",
            success : function(data) {
                
            }                    
        };
        $("#form1").ajaxSubmit(options);

五、layer上传方法

HTML部分
         <button type="button" class="layui-btn" id="test2">
                 <i class="layui-icon">&#xe67c;</i>上传图片
         </button>

JS部分

         layui.use('upload', function(){
                var upload = layui.upload;
                //执行实例
                var uploadInst = upload.render({
                      elem: '#test2', //绑定元素
                      url: '地址', //上传接口
                      accept: 'images',//指定允许上传时校验的文件类型 可选值有：images、file、video、audio
                      field:"image", //设定文件域的字段名
                      data:{  //请求上传接口的额外参数
                             "name":function(){    return $('#Name').val()   }
                      },
                      auto:false, //是否选完文件后自动上传。设定 false，需要设置 bindAction 参数来指向一个其它按钮提交上传
                      bindAction:".btn01", //指向一个按钮触发上传，一般配合 auto: false 来使用
                      before:function(){ //文件提交上传前的回调
                             if(!$('#Name').val()){   return false;  }
                       },
                       done: function(res){ //执行上传请求后的回调
                             //上传完毕回调
                            uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        },
                        error: function(error){
                            //请求异常回调
                         }
                 });
         });

六、el-upload（tabledata格式上传）

<template>
    <div class="manage_dialog_model handle-btn-group" style="float: right;">
        <span class="manage_dialog_operating_btn">
        	<el-button type="primary" round><i></i>添加</el-button>
        </span>
        <el-dialog title="添加" :close-on-click-modal="false" width="800px">
            <el-form :model="form" ref="addFormRef">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="信息描述" prop="description">
                        <el-input type="textarea" :rows="2" placeholder="请输入信息描述" v-model="form.description" autocomplete="off"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-upload
                            class="upload-demo"
                            :action="uploadFileUrl"
                            :http-request="fileUpload"
                            :on-remove="removeFile"
                            :file-list="fileList"
                            :limit="1"
                            :on-exceed="handleExceed"
                            >
                        </el-upload>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="manage_dialog_footer dialog-footer">
                <el-button type="primary" @click="submitAdd()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "AddHandle",
        data() {
            return {
                uploadFileUrl: "",
                fileList:[],
                form: {
                    description: ""
                },
            }
        },
        methods: {
            fileUpload(param){
				const isJPG = param.file.type === 'image/jpeg' || param.file.type === 'image/png';
				const isLt2M = param.file.size / 1024 / 1024 < 2;
				const isImage = param.file.type.split('/')[0] === 'image'
				if(isImage){
				if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
						this.fileList = [];
						return;
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
						this.fileList = [];
						return;
					}
				}
				this.fileList = [param.file]
            },
            removeFile(){
				this.fileList = []
            },
            handleExceed(files) {
                this.fileList = [files[0]]
            },
            submitAdd() {
                //配置
                let config = {
                    //添加请求头
                    headers: {
                        "Content-Type": "multipart/form-data"
                    },
                };
                var formData = new FormData();
                formData.append("file",this.fileList[0]);
                for (const key in this.form) {
					formData.append(key,this.form[key]);
                }
                this.$post(
					uploadFileUrl,
                    formData,
                    config
                ).then(res => {
                        if (res.data.code == 1) {
                            this.$message.success("添加成功！");
                           
                            this.$emit("refreshData");
                        } else {
                            this.$message.error(res.data.msg + "!");
                        }
                }).catch(error => {
                })
            }
        }
    }
</script>