文件上传、

FormData方式

//因为input file 的onchange事件选择重复的文件第二次不会触发,所以给button绑定事件,生成虚拟file类型的input框
//或者可以直接使用<input type="file" @change="btnEvt">/>

    btnEvt() {     //给input绑定btnEvt点击事件
      //  console.log(evt.target.files);
      const input = document.createElement("input");
      input.setAttribute("type", "file");
      // input对象可以监听change事件
      input.onchange = function (evt) {
        console.log(evt.target.files[0]);
        //给fd添加数据对象,然后它会对添加的数据进行序列化
        const fd = new FormData()
        //自定义文件名字,文件
        fd.append('fileName',evt.target.files[0])
        //发送请求  进行文件上传
        //如果需要上传进度  在axios请求参数中需要添加
        //上传进度 onUploadProgress:req.uploadProgress || (() => {})
        //下载进度 onDownloadProgress:req.downloadProgress || (() => {})
        //fileApi自定义请求接口  
        let _file = fileApi(fd, e => {console.log(e)})
        //e.loaded / e.total   当前进度/总进度
        _file.then(d=>{
          console.log(d);  //接收响应
        })
      };
      input.click()  //自调用
    },




 photoUploadEvt() {
       const input = document.createElement("input");
        input.setAttribute("type", "file");
        // input对象可以监听change事件
        input.onchange = function (evt) {        

        console.log(evt.target.files[0]);
        let file = evt.target.files[0];
        //把图片变为一个图片对象

        let fr = new FileReader();
        //得到一个文件读取对象

        fr.onload = function () {
          //读取完成的回调

          let img = new Image();
          //新建一个Image对象,然后给Image赋值即可

          img.onload = function () {
            //因为图片加载需要时间,所以应该监听onload时间

            let canvas = document.createElement("canvas");
            //把图片进行缩放绘制到canvas上

            //设置画布宽高
            canvas.width = 200;
            canvas.height = 200;

            //获取画笔
            let ctx = canvas.getContext("2d");

          
          如果是长方形图片进行剪切
          let max = img.width > img.height ? img.width : img.height,
          rate = max / 200,
          canvasHeight = img.height / rate

           //定义图片起始位置及大小
          ctx.drawImage(img, 0, 0, img.width, img.height, 0, (200 - canvasHeight) / 2, 
          200, canvasHeight)

            //获取64位字节码
            let res = canvas.toDataURL();
            console.log(res);
            document.getElementById("canvasNode").appendChild(canvas);
          };
          img.src = this.result;
        };

        //开始读取  -- 是这个方法把文件读取为一个base64字节码
        fr.readAsDataURL(file);
      };
        //  debugger
      input.click();
    },