文件上传细节

细节1

spring.http.encoding.charset=UTF-8 server.tomcat.uri-encoding=UTF-8 spring.servlet.multipart.max-file-size=6MB spring.servlet.multipart.max-request-size=10MB

细节2

path1=C:/springTemp spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${path1}

细节3  <input type="file" @change="getfile($event)"> 

var app = new Vue({     el: "#foodtable",  //表示这个类只为id为foodtable里面的内容服务,以外的布管     //属性     data: {         foods: [], //定义了一个属性 集合         food:{         },         files:''     },//方法     methods: {         addfood() {             location="addfood.html";         },         getfile(event){             this.files=event.target.files;           //  获得上传的文件数组的第一个             var file=this.files[0]           //  实例化             var reader=new FileReader();            // 设置回调             reader.οnlοad=function(e){                 $("#img").attr("src",e.target.result);             }            // 加载图片             reader.readAsDataURL(file);         }         ,updatefood(obj){             this.food=obj;             $("#model1").modal('show');         },         deletefood(id){             $.getJSON("delFoodById/"+id,function(json){                 if(json.code==200){                     myload();                 }             });         },         update(){             //html任意出现 null 会自动加上  'null' //就会变成字符串的空             let fdate=new FormData();  //包含文件的数据对象             fdate.append("files",this.files[0]); //  addfood?file=xxx&name=刘德华             for(let f in this.food){                 if(this.food[f]!=null&&this.food[f]!='') {                     fdate.append(f, this.food[f]);// <input name='属性名称f' value="属性的值[f]"                 }             }             $.ajax({                 url: "updatefood",                 type: 'POST',                 cache: false,                 data: fdate,                 processData: false,   //文件上传                 contentType: false,                 dataType:"json", //回调类型                 beforeSend: function(){                     //上传之前你想干嘛                 },                 success : function(json) {                     if(json.code==200) {                         alert("成功")                        myload();                         $("#model1").modal('hide'); //关闭层                     }else{                         //什么提示                         alert("错误");                     }                 },                 error: function(XMLHttpRequest, textStatus, errorThrown) {                     //上传异常给一个什么意思                     alert("错误2");                 },             });         }     } });

细节4代码

@Value("${path1}") private String path;  //值 在配置文件中 没有写死,想换就直接改配置       @PostMapping("uploadFood")  //不要同名了 updateFood会同名     public ResponseData upload(MultipartFile files ,Food food ){                try {      String file1FileName = files.getOriginalFilename(); //使用当前时间毫秒数 做为文件名称     file1FileName= System.currentTimeMillis()+"id"+file1FileName.substring(file1FileName.lastIndexOf("."),file1FileName.length());     //保存文件的地址       File file=new File(path+"/images",file1FileName);                 //开始接收    获得读文件的流        InputStream is = files.getInputStream();        FileOutputStream fos=new FileOutputStream(file);         byte [] b=new byte[1024*100];  //开辟一个空间 100KB          int len=0; //len 的到实际接收的大小          while(  (len=is.read(b))>0  ){                     fos.write(b, 0, len);             }                 fos.close();                 is.close();                 //成功为200             //把晚间的名称 放到对象里面           food.setPic(file1FileName);           //调用service添加           foodService.saveNotNull(food);           return ResponseData.ok();         } catch (Exception e) {             e.printStackTrace();             return ResponseData.customerError("文件上传错误");         }     }

spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:c:/Temp

<input type="file" name="file1" id="file1" class="form-control" @change="getfiles($event)">

var upapp=new Vue({
    el:"#upapp",
    data:{
        files:[],
     },
    methods:{
        getfiles:function(event){
            this.files= event.target.files;  //通过点击文件上传时间获得文件
        },
        ajaxsubmit:function(){
            let fdate=new FormData();
            fdate.append("files",this.files[0]);
          $.ajax({
                url: "ajaxupload",
                type: 'POST',
                cache: false,
                data: fdate,
                processData: false,   //文件上传
                contentType: false,
                dataType:"json", //回调类型
                beforeSend: function(){
                    upapp.up_mess = "文件上传中..";
                },
                success : function(json) {
                    if (json.code==200) {
                        upapp.up_mess = "文件上传完成"
                        swal("文件上传完成","表扬","success");
                        myload();
                    } else if(json.code==1001){
                        toastr.success(json.message);
                    }
                    else {
                        upapp.error_text = "上传失败了"
                    }
                    upapp.error_text=json.message;
                },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                      upapp.error_text = "上传失败,文件可能超过文件大小限制"
                      toastr.error("上传失败,文件可能超过文件大小限制请与老师联系");
                  },
            });

---------------------------------------------------------------------------------------------------------------------------

   <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/vue.js"></script>

    <script src="js/axios.min.js"></script>

    <script src="js/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

文件上传时

  let fdate = new FormData();

                for(let f in this.food){

                    fdate.append(f,this.food[f]);

                }

                for(let i=0;i<this.files.length;i++){

                    fdate.append("files",this.files[i]);

                }

                axios.post("addfoodajax",fdate,{

                   headers: { 'Content-Type': 'multipart/form-data' }

                }).then(function(response){

                   if(response.data!='null') {

                      // app.foods.push(response.data);

                       app.foods.splice(0,0,response.data);  //第一个参数是下标,第二个参数是影响的个数,第三个是值

                       app2.$data.files='';

                   }

                });

高级查询时

axios.get("queryfood",{params:app.food})
.then(function (resp) {
    app.foods=resp.data.list;
    app.pageInfo=resp.data;
}).catch(function (reason) {
    alert("服务器错误"+reason)
})

:class="{'hidden':!pageInfo.hasPreviousPage}"