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=

<script type="text/ecmascript-6">
    import ScrollLock from '../mixins/scrollLock'
    import {mapState, mapMutations} from 'vuex'

    export default {
        name: "Promotion",
        mixins: [ScrollLock],
        data() {
            return {
            }
        },
        computed: {
        },
        methods: {
            chooseImg(e, type) {
                let file = e.target.files[0];
                if (!file) {
                    return;
                }
                this.transformToBase64(file, type);
            },
            transformToBase64(file, type) {
                if (!window.FileReader) {
                    console.log('瀏覽器對FileReader方法不兼容');
                } else {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);//讀出 base64
                    reader.onloadend = () => {
                        this.imgCompress(reader, type);
                    };
                }
            },
            imgCompress(reader, type) {//圖片超過尺寸壓縮
                let img = new Image();
                img.src = reader.result;
                img.onload = () => {
                    let w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0;
                    let maxSize = {
                        width: 1000,
                        height: 1000,
                        level: 0.2
                    };
                    if (w > maxSize.width || h > maxSize.height) {
                        let multiple = Math.max(w / maxSize.width, h / maxSize.height);
                        resizeW = w / multiple;
                        resizeH = h / multiple;
                        let canvas = document.createElement('canvas'),
                            ctx = canvas.getContext('2d');
                        canvas.width = resizeW;
                        canvas.height = resizeH;
                        ctx.drawImage(img, 0, 0, resizeW, resizeH);
                        let base64 = canvas.toDataURL('image/jpeg', maxSize.level);
                        this.uploadImg(base64, type);
                    } else {
                        // 如果圖片尺寸小於最大限制，則不壓縮直接上傳
                        this.uploadImg(reader.result, type);
                    }
                }
            },
            uploadImg(base64, type) {
                // this[type] = base64;
                this.$axios.post('driver/uploadImage', {
                    picString: base64,
                    picType: type
                }).then(response => {
                    this[type] = base64;
                }, () => {
                    this.$error('圖片上傳失敗');
                });
            },
        },
        created() {
        },
        mounted() {
        }
    }
</script>

 

服務端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();
    }
}