最近项目有个需求需要在前端vue上传图片，然后在后端将图片存到本地的一个文件夹下。

1、vue

这里是将上传图片封装成了一个组件来使用，组件名为 upload-image.vue

<template><div class="clearfix"><!--name    —— 向后端传递数据时会要用到action  —— 后端路径--><a-uploadname="faceImage"            :headers="headers":action="fileurl"list-type="picture-card"v-model:file-list="fileList":before-upload="beforeUpload"@preview="handlePreview"@change="handleChange"><div v-if="fileList.length < imgNum"><a-icon type="plus" /><div class="ant-upload-text">上传图片</div></div></a-upload><a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal></div>
</template><script>
import mitt from "@/utils/mitt";function getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});
}export default {name: "uoload-image",data(){return{imgNum:1,              //设置最多可以上传的图片数量headers: {    'token': localStorage.getItem('token'),},fileurl:"/api/file/upload",       //上传到后端的路径previewVisible: false,previewImage: '',fileList: []}},methods:{handleCancel() {this.previewVisible = false;},async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;},// 检查图片格式和图片大小beforeUpload(file){//图片格式限制为 jpeg、pngconst isJpgOrPng = file.type === 'image/jpeg' || file.type === "image/png";if (!isJpgOrPng){this.$message.error("请选择jpg/png图片");}//图片大小限制为 2M以内const isLt2M = file.size/1024/1024 <= 2;if (!isLt2M){this.$message.error("图片大小不能超过2MB，请重新上传");}return isJpgOrPng && isLt2M;},handleChange ({ file, fileList }) {this.fileList = fileList;if (file.hasOwnProperty('error')){this.$message.error("图片上传失败");return;}},}
}
</script><style scoped>
.ant-upload-select-picture-card i {font-size: 32px;color: #999;
}.ant-upload-select-picture-card .ant-upload-text {margin-top: 8px;color: #666;
}
</style>

注意：后端路径有个地方需要注意，关于这里的 ' /api '，我在vue.config.js做了跨域处理

2、后端springboot

@RestController
@RequestMapping("/file")
public class UploadImageController {//这里的 faceImage 就是 a-upload 的 name 属性@PostMapping("/upload")public void uploadImage(@RequestParam("faceImage") MultipartFile pic) {/** 编码为字符串*/String base64Str = "";try {base64Str = Base64Utils.encodeToString(pic.getBytes());     //将图片转化为base64格式String imgName = pic.pic.getOriginalFilename();             //获取到图片原本的名字storeImageAtLocal(base64Str, imgName);                      //为了方便在其他地方调用，这里封装成了一个工具类}catch (IOException e){e.printStackTrace();}}
}

public class UploadUtil {//这里的pathName表示 你要存到哪，图片名叫啥，如D:\\resources\\image\\smile.jpgpublic static void storeImageAtLocal(String base64ImgData,String pathName){Base64.Decoder decoder = Base64.getDecoder();byte[] bytes = decoder.decode(base64ImgData);/** 字节流转文件*/FileOutputStream fos = null;try {fos = new FileOutputStream(pathName);fos.write(bytes);} catch (IOException e) {e.printStackTrace();} finally {if (fos != null){try {fos.close();} catch (IOException e) {e.printStackTrace();}}}}//本地图片转base64编码数据public static String getImageBase64Data(String localPath){File file = new File(localPath);    //URL url = new URL(src);byte[] data = null;try {InputStream in = new FileInputStream(file);  //InputStream in = url.openStream();data = new byte[in.available()];in.read(data);in.close();} catch (IOException e) {e.printStackTrace();}Base64.Encoder encoder = Base64.getEncoder();return encoder.encodeToString(data);}}

antd vue上传图片至后端相关推荐

前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】
一.话不多,先看效果: 大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我来啦~ 很久以前我写过一篇vue上传图片并显示的文章-> 鼠标点击这里~ 但是上次只是写了前端的,并没有把图片存储在服务器 ...
实现Java+Vue上传图片到七牛云和从七牛云删除图片
环境准备开发环境后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0 相关链接七牛云JavaSDK ...
SpringBoot+OSS+VUE+mybatis-plus 前后端（前后端 · 素材管理）
SpringBoot+OSS+VUE(前后端 · 素材管理) 功能: 1. 实现客户端WEB直传(图片上传) 2. 实现素材管理模块有图片上传(客户端直 ...
vue上传图片，并回显图片
vue上传图片,并回显图片未用组件库,原生的input输入框提交这个看需求吧,用组件库的话,可以减少挺多代码的,但是这个的后端,因为只能单独提交照片,所以我就使用js了.逻辑绕绕的. <in ...
vue上传图片及其注意事项
vue上传图片,根据elementUI官网上传组件: <el-uploadaction="":on-change="handleUpload":file- ...
Antd Vue range-picker 日期初始值设置与重置日期踩坑总结
一.业务场景: 1.用form表单包裹,用的是 Antd Vue range-picker链接 2.创建时间初始值设置为当天的 00:00:00-23:59:59:如下截图: 2.日期选择器如下截图: ...
vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
vue上传图片组件编写
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 编写一 ...
记一次Spring boot 和Vue的前后端分离的入门培训
记一次Spring boot 和Vue的前后端分离的入门培训由于公司之前是写C#的,现在要转 Java分布式 + vue,所以进行一次前后端的简单培训. 前端工具和环境: Node.js V10.1 ...

antd vue上传图片至后端

1、vue

2、后端springboot

antd vue上传图片至后端相关推荐

最新文章

热门文章