vue附件上傳

Vue附件上傳，需要用到<el-upload>標簽，標簽中的屬性有很多，對應后台的action，設置上傳文件個數及其他設置

在on-success函數中，是上傳成功的回調函數，這個地方的處理是后台返回一個文件路徑，該標簽綁定了一個元素為：nowPersonInfo.filesrc

綁定這個元素的目的是為了再上傳的時候，一個表單里還有其他的屬性，將這個元素動態綁定以后，存一個文件路徑，到時候要取出來的時候再讀出來

后台代碼：

@PostMapping("/upload")
    @ResponseBody
    public void uploadImg(@RequestParam(value="file",required=false)MultipartFile file,HttpServletRequest request, HttpServletResponse resp)throws Exception {
        if(request.getCharacterEncoding()==null) {
            request.setCharacterEncoding("UTF-8");
        }
        String fileName=file.getOriginalFilename();
        //String suffxName=fileName.substring(fileName.lastIndexOf("."));
        String filePath="F://icappImge/";
        File dest = new File(filePath + fileName);
         if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
            try {
                file.transferTo(dest);
                ServletOutputStream out=resp.getOutputStream();
                OutputStreamWriter ow=new OutputStreamWriter(out,"UTF-8");
                ow.write(filePath+fileName);
                ow.flush();
                ow.close();
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
    }

OutputStreamWriter會返回前端一個路徑，這個路徑就是之前綁定元素，上傳成功回調函數中的值。
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

下載附件的后台代碼：

@RequestMapping("/upDown")
    @ResponseBody
    public void test(String pk,HttpServletRequest request,HttpServletResponse response) throws Exception{
        /* 獲取數據庫中文件的路徑 */
        String filePath=service.getFilePath(pk);
        int inex=filePath.lastIndexOf("/");
        String fileName=filePath.substring(inex+1);
        if(fileName!=null) {
            String realPath = filePath;
            File file = new File(realPath);
            if(file.exists()) {
                // 配置文件下載
                response.setHeader("content-type", "application/octet-stream");
                response.setContentType("application/octet-stream");
                // 下載文件能正常顯示中文
                response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
                byte[] buffer = new byte[1024];
                FileInputStream fis = null;
                BufferedInputStream bis = null;
                try {
                    fis = new FileInputStream(file);
                    bis = new BufferedInputStream(fis);
                    OutputStream os = response.getOutputStream();
                    int i = bis.read(buffer);
                    while (i != -1) {
                        os.write(buffer, 0, i);
                        i = bis.read(buffer);
                    }
                } catch (Exception e) {
                }finally {
                    if (bis != null) {
                        try {
                            bis.close();
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                    if (fis != null) {
                        try {
                            fis.close();
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
        }
    }

傳了一個pk，也就是一條數據的主鍵id，根據id查路徑，再去下載，接上一篇文章的附件下載