实现的方式是上传图片file->获取base64->转化为canvas->canvas压缩后转化为base64->base64转化为file

    1. <template>
    2.   <div>
    3.         <input ref="uploadinput" type="file" name="file" accept="image/*" @change="changeImg"/>
    4.   </div>
    5. </template>
    7. <script>
    8.   export default {
    9.     data(){
    10.         return {
    11.           picurl:""
    12.       }
    13.     },
    14.     methods: {
    15.       async changeImg(){
    16.               let that = this
    17.               let input = this.$refs.uploadinput
    18.               let file = input.files[0]
    19.               this.picurl = await this.getBase64(file)
    20.                     let newfile = dataURLtoFile(this.picurl,"pic.jpeg")
    21.       },
    22.       //获取Base64
    23.         getBase64(file) {
    24.         return new Promise((resolve, reject) => {
    25.           const reader = new FileReader();
    26.           reader.readAsDataURL(file);
    27.           reader.onload = () => {
    28.             this.canvasDataURL(reader.result,1500).then(r=>{
    29.               resolve(r);
    30.             }).catch(e=>{
    31.               reject(e);
    32.             })
    33.           }
    34.           reader.onerror = error => reject(error);
    35.         });
    36.       },
    38.       //图片压缩处理
    39.       canvasDataURL(re,w){
    40.         return new Promise((resolve, reject) =>{
    41.           let newImg=new Image();
    42.           newImg.src=re;
    43.           let imgWidth,imgHeight;
    44.           newImg.onload = () =>{
    45.             let img=document.createElement("img");
    46.             img.src=newImg.src;
    47.             imgWidth=img.width;
    48.             imgHeight=img.height;
    49.             let canvas=document.createElement("canvas");
    50.             canvas.width=imgWidth;
    51.             canvas.height=imgHeight;
    52.             let ctx=canvas.getContext("2d");
    53.             ctx.clearRect(0,0,imgWidth,imgHeight);
    54.             ctx.drawImage(img,0,0,imgWidth,imgHeight);
    55.             resolve(canvas.toDataURL("image/jpeg",0.2))
    56.           }
    57.           newImg.onerror = error => reject(error);
    58.         }) 
    59.       },
    61.       //将base64转换为文件
    62.       dataURLtoFile(dataurl, filename) {
    63.         let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    64.             bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    65.         while(n--){
    66.           u8arr[n] = bstr.charCodeAt(n);
    67.         }
    68.         return new File([u8arr], filename, {type:mime});
    69.       },
    70.     }
    71.   }
    72. </script>
    74. <style lang="scss" scoped>
    76. </style>