vue利用canvas将图片上传到服务器
2023-09-14 09:06:26 时间
前端.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(); } }
相关文章
- Vue_(基础)商品管理-demo
- vscode vue 片段
- vue.js3:色调色相调整并保存(vue@3.2.37)
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- vue-cli3的eslint配置问题
- [Poi] Build a Vue App with Poi
- vue.js3:在css中使用变量(vue@3.2.6)
- vue定义一个变量并显示
- vue 分组左右选择
- Vue.js:Vue-Router动态路由从服务器接口获取路由数据
- vue-router(路由嵌套)
- vue如何正确销毁当前组件的scroll事件?
- 175:vue+openlayers 给feature填充渐变色
- 154:vue+openlayers 调节地图的明亮度、对比度、饱和度
- 103:vue+openlayers 计算并显示卫星轨迹(EPSG:3857 示例代码)
- 036:vue+openlayers本地上传shp文件并解析(示例代码)
- 021:vue+openlayer:显示经纬度坐标(代码示例)
- Vue(九)http-proxy 跨域、插槽 slot
- vue项目打包后部署到服务器(超详细步骤)