js上傳文件並進行base64編碼--vue

前端：

onUpload: function(event) {
                    var self = this;
                    // 利用fileReader對象獲取file
                    var file = event.target.files[0];
                    var filesize = file.size;
                    var filename = file.name;
                    var filetype = file.type;
                    var suffix = ".png";

                    var objUrl = this.getObjectURL(file);

                    if(objUrl) {

                        document.getElementById('img1').src = objUrl;

                    }
                    console.log(file);

                    // 2,621,440   2M
                    if(filesize > 2101440) {
                        // 圖片大於2MB

                    }

                    if(!/image\/\w+/.test(file.type)) {
                        alert("請確保文件爲圖像類型");
                        return;
                    }

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {

                        // 讀取到的圖片base64 數據編碼 將此編碼字符串傳給後臺即可
                        var imgcode = e.target.result;

                        var imgfile = imgcode;
                        //console.log(imgcode);

                        if(filetype == "image/jpeg") { //data:image/jpeg;base64,base64編碼的jpeg圖片數據
                            suffix = ".jpg";
                            imgfile = imgfile.replace("data:image/jpeg;base64,", "");

                        } else if(filetype == "image/png") { //data:image/png;base64,base64編碼的png圖片數據
                            suffix = ".png";
                            imgfile = imgfile.replace("data:image/png;base64,", "");

                        } else {
                            alert("請上傳jpg，png格式");
                            return;
                        }

                        console.log(imgfile);

                        $.post(request + "personCenter/replaceBase64Image.shtml", {
                                suffix: suffix,
                                imgStr: imgfile
                            },
                            function(data) {

                                console.log(data);

                                if(data != null) {
                                    self.imgFilePath = data;
                                    //回顯示，或 v-bind:src ...document.getElementById('img3').src =basePath+self.imgFilePath;

                                }
                            });

                    }

                },
                getObjectURL: function(file) {
                    var url = null;
                    if(window.createObjectURL != undefined) {
                        url = window.createObjectURL(file); //basic
                    } else if(window.URL != undefined) {
                        url = window.URL.createObjectURL(file);
                    } else if(window.webkitURL != undefined) {
                        url = window.webkitURL.createObjectURL(file);
                    }

                    return url;
                }
            }

 

 

 

 

後臺部分：

/**
     * base64轉化成文件保存。返回路徑

     */
    @RequestMapping("replaceBase64Image")
    @ResponseBody
    public String replaceBase64Image(HttpServletResponse response, HttpServletRequest request, String suffix,
            String imgStr) {
        response.setHeader("Access-Control-Allow-Origin", "*");
        Logger logger = Logger.getLogger("person");
        BASE64Decoder decoder = new BASE64Decoder();

        String ext = "";

        if (".jpg".equalsIgnoreCase(suffix) || ".png".equalsIgnoreCase(suffix)) {
            ext = suffix;
        }

        SimpleDateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd/HH");
        /// 構建文件保存的目錄/
        String logoPathDir = "/upload/filepath/mypic/"; // dateformat.format(new Date());
        /// 得到文件保存目錄的真實路徑/
        String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);
        // ** 根據真實路徑創建目錄*
        File logoSaveFile = new File(logoRealPathDir);
        if (!logoSaveFile.exists()) {
            logoSaveFile.mkdirs();
        }

        String imgFilePath = logoRealPathDir;
        try {
            // Base64解碼
            byte[] b = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {// 調整異常數據
                    b[i] += 256;
                }
            }

            //

            // 生成文件名
            String files = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date())
                    + (new Random().nextInt(9000) % (9000 - 1000 + 1) + 1000) + ext;
            // 生成文件路徑
            String filename = imgFilePath + "/" + files;
            try {
                // 生成文件
                File imageFile = new File(filename);
                imageFile.createNewFile();
                if (!imageFile.exists()) {
                    imageFile.createNewFile();
                }
                OutputStream imageStream = new FileOutputStream(imageFile);
                imageStream.write(b);
                imageStream.flush();
                imageStream.close();
            } catch (Exception e) {
                e.printStackTrace();
            }

            //
            /*
             * OutputStream out = new FileOutputStream(imgFilePath+ ".png"); out.write(b);
             * out.flush(); out.close();
             */

            logger.debug(filename);
            return logoPathDir + files;
        } catch (Exception e) {
            logger.debug("0");
            return "0";
        }

    }