文件上传和下载是java web中常见的操作，文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下，而文件下载则是与文件上传相反，将文件从服务器的特定的文件夹下的文件通过IO流下载到本地。

本地的上传下载

首先在本地的磁盘上创建一个文件夹用来存储

//本地文件上传存储路径
    private static final String IMAGE_URL = "E:/tupian/xxxx";

上传:

• 文件覆盖：文件上传，在同一个目录下重名，后上传的文件会覆盖前一个文件，所以建议给文件名设置为唯一。可采用uuid设置文件名。

//本地文件上传
    @PostMapping("/localUpload")
    public R localUpload(MultipartFile file) {
        try {
            if (file.isEmpty()) {
                return R.error("请选择文件");
            }
            // 获取文件的名称
            String originalFilename = file.getOriginalFilename();
            // 文件后缀 例如：.jpg
            String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf("."));
            // uuid 生成文件名
            String uuid = String.valueOf(UUID.randomUUID());
            // 根路径，在 resources/static/upload
            String basePath = IMAGE_URL +  "/";
            // 新的文件名，使用uuid生成文件名
            String fileName = uuid + fileSuffix;
            // 创建新的文件
            File fileExist = new File(basePath);
            // 文件夹不存在，则新建
            if (!fileExist.exists()) {
                fileExist.mkdirs();
            }
            // 获取文件对象
            File file1 = new File(basePath, fileName);
            // 完成文件的上传
            file.transferTo(file1);
            // 返回绝对路径
            return R.ok().put("url", fileName);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return R.error("上传失败");
    }

• 将图片的名字存储到数据库，通过此方法把图片回显到前端

/**
     * 查看图片
     * // method属性指定了HTTP请求的方法类型，这里是GET
     */
    @RequestMapping(value = "/view/{picName}", method = {RequestMethod.GET})
    public void viewImage(@PathVariable("picName") String picName, HttpServletResponse response) throws Exception {
        if (StringUtils.isNotBlank(picName)){
            // 获取当前项目路径，File.separator静态字段\
            String destFileName = "E:/tupian/xxxx" + File.separator + picName;
            //响应内容为二进制流
            response.setContentType("application/octet-stream");
            //创建文件对象
            File file = new File(destFileName);

            if (file.exists()) {
                //创建文件输入流
                InputStream in = new FileInputStream(destFileName);
                //获取响应输出流
                OutputStream out = response.getOutputStream();
                //读取文件内容并写入响应输出流
                for (int b = -1; (b = in.read()) != -1; ) {
                    out.write(b);
                }
                //关闭输入输出流
                out.close();
                in.close();
            }
        }
    }

前端代码：

<el-table-column
        prop="avatar"
        header-align="center"
        align="center"
        label="头像"
        >
        <template slot-scope="scope">
          <img v-if="scope.row.image"
                 :src="scope.row.image"
                 style="width: 50px; height: 50px;" 
                 class="image">
               <el-button v-if="scope.row.image" type="text" size="small" @click="downLoad(scope.row.image)">图片下载
              </el-button>
        </template>
      </el-table-column>

下载的函数

//头像下载函数
     downLoad(url) {
      let link = document.createElement('a');
      link.href = url;
      link.download = '头像'; // 下载的文件名
      link.click();
    }

图片在前端回显时通过此行代码调用这个接口，来对图片的路径进行拼接，从而实现前端图片的回显。

this.dataList.map(item => {
              item.avatar = item.avatar?this.$http.adornUrl('/dev/manage/view/'+item.avatar):null
            })

将这行代码添加到数据的获取函数里，来实现展示。 

// 获取数据列表
      getDataList () {
        
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/dev/manage/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'deviceNumber': this.dataForm.deviceNumber
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            
            this.dataList.map(item => {
              item.avatar = item.avatar?this.$http.adornUrl('/dev/manage/view/'+item.avatar):null
            })
            this.totalPage = data.page.totalCount
          
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }