vue利用canvas将图片上传到服务器

 

前端.vue页面：

    <div class="panel">
      <div class="panel_hd">身份证div>
      <div class="panel_bd flex">
        <div class="id-card">
          <div>身份证正面div>
          <div class="submit-img">
            <input type="file" accept="image/*" @change="chooseImg($event,'fileFront')"/>
            <img :src="fileFront" alt="">
          div>
        div>
        <div class="id-card">
          <div>身份证反面div>
          <div class="submit-img">
            <input type="file" accept="image/*" @change="chooseImg($event,'fileBack')"/>
            <img :src="fileBack" alt="">
          div>
        div>
      div>
    div>

 

js：

canvas绘图后用 canvas.toDataURL()可以得到图片的base64 dataURI——格式：data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/7QjCUGhvdG9zaG9wIDMuMAA/9k=

 

服务端api：

程序将接收到base64串，通过fastdfs的api上传到文件服务器。fastdfs工具点击这里

@Slf4j
@RequestMapping("/api/driver")
@RestController
public class DriverInfoController {

    @Autowired
    private FastdfsClientUtil fastdfsClientUtil;

    @PostMapping("/uploadImage")
    @ResponseBody
    public Result uploadImage(@RequestBody JSONObject requestBody){
        String picString = requestBody.getString("picString");
        
        String imgPath = fastdfsClientUtil.uploadImageAndCrtThumbImageByBase64(picString);
        log.info("[上传返回的地址:{}]",imgPath);
        return Result.ok();
    }
}