vue中图片上传及回显

在vue中图片上传到服务器下指定路径，并实现根据图片路径调取后台接口返回图片流在vue页面展示图片

一、图片上传

1、前台上传

    <template slot-scope="scope">
      <el-button type="text" @click="detail(scope.row)">{{
        scope.row.NAME
      }}</el-button>
    </template>
  </el-table-column>
  <el-table-column
    label="会议主题"
    prop="THEME"
    header-align="center"
  ></el-table-column>
  <el-table-column
    label="会议时间"
    prop="HY_TIME"
    header-align="center"
    width="180"
  >
    <template slot-scope="scope">
      {{ scope.row.HY_TIME | formatTime }}
    </template>
  </el-table-column>
  <el-table-column
    label="会议状态"
    prop="STATUS"
    header-align="center"
    width="100"
  >
    <template slot-scope="scope">
      {{ scope.row.STATUS | formatStatus }}
    </template>
  </el-table-column>
  <el-table-column
    label="操作"
    width="200"
    header-align="center"
    align="center"
  >
    <template slot-scope="scope">
      <el-upload
        class="upload-demo"
        action="/vseaf-service/meeting/expertupload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple="false"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-success="handleAvatarSuccess"
        :data="uploadData"
      >
        <el-tooltip
          content="只能上传jpg/png文件，且不超过500kb"
          placement="top"
        >
          <el-button size="small" type="primary" @click="getHyid(scope.row)">签章上传</el-button>
        </el-tooltip>
      </el-upload>
    </template>
  </el-table-column>
</el-table>
<el-pagination
  style="float: right"
  :current-page="searchForm.page"
  :page-size="searchForm.pageSize"
  :total="total"
  @current-change="handleCurrentChange"
  @size-change="handleSizeChange"
  :page-sizes="[10, 30, 50]"
  layout="total,sizes,prev,pager,next"
></el-pagination>
</div>

 getHyid(row){
  this.HYID=row.ID;
  this.uploadData.hyId=row.ID;
},
// 文件上传成功时的钩子
handleAvatarSuccess(res, file) {
  if (res.meta.success) {
    this.$message.success("上传成功");
    this.initTable();
  } else {
    this.$message.error("上传失败");
  }
},

2、后台上传接口

       file:
         uploadFolder: E:\production\vsproductshow\uploadFiles
    @Value("${file.uploadFolder}")
    private String uploadFolder;
    
   @RequestMapping("/expertupload")
    @ApiOperation("专家签章上传")
    public JsonMessage FileUpdate(HttpServletRequest request, MultipartFile file, @RequestParam Map<String, Object> params) {
        JsonMessage jsonMessage = new JsonMessage();
        //配置文件设置想保存的路径
        String str = uploadFolder;
        //得到上传时的文件名字
        String originalname = file.getOriginalFilename();
//        String newName = originalname.substring(originalname.lastIndexOf("."));
        String nowdate = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());//获取String类型的时间
        String newName = nowdate +"_"+ originalname;
        File newFile = new File(str, newName);
        //获得文件目录，判断是否存在
        if (!newFile.getParentFile().exists()) {
            //如果path路径不存在，创建一个文件夹，存在则使用当前文件夹
            newFile.getParentFile().mkdirs();
        }
        try {
            //保存文件到指定路径之中
            file.transferTo(newFile);
            params.put("file_id", nowdate);
            params.put("file_name", newName);
            params.put("file_path", str + newName);
//            params.put("browse_path", "..\\..\\static\\img\\signature"+ newName);
            meetingService.updateSignature(params);//专家签章上传_状态更改
            System.out.println("上传的文件路径:" + str + newName);
            jsonMessage.success();
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
            jsonMessage.failure(e.getMessage());
        }
        return jsonMessage;
    }

二、图片回显

1、前台根据请求后台获取图片流

     <el-table-column
        header-align="center"
        align="center"
        prop="TIME"
        label="签章"
      >
        <template slot-scope="scope">
          <img
            :ref="'abc' + scope.$index"
            :src="scope.row.FILE_PATH"
            width="200px"
            height="50px"
            :onload="onLoadImg(scope.$index,scope.row.FILE_NAME)"
          />
        </template>
      </el-table-column>

      onLoadImg(id, filename) {
          if(filename!=null){
            let params ={
            file_name :filename
          }
          axios({
            url: "/vseaf-service/meeting/getExpertImg",
            method: "get",
            responseType: "blob",
            params: params,
          }).then((res) => {
            let url = window.URL.createObjectURL(res.data); // 获取对象url
             if (id!=undefined) {
            this.$refs['abc'+id].src = url;
            }
          });
          }
       },

2、后台接口

file:
     uploadFolder: E:\production\vsproductshow\uploadFiles
 
@Value("${file.uploadFolder}")
private String uploadFolder;

@GetMapping(value = "/getExpertImg")
    public void getExpertImg(HttpServletRequest request, HttpServletResponse response, @RequestParam Map<String, Object> params) throws IOException {
        File file = new File(uploadFolder, params.get("file_name").toString());
        FileInputStream fis;
        fis = new FileInputStream(file);

        long size = file.length();
        byte[] data = new byte[(int) size];
        fis.read(data, 0, (int) size);
        fis.close();
        response.setContentType("image/png");
        OutputStream out = response.getOutputStream();
        out.write(data);
        out.flush();
        out.close();
    }