vue前端上传文件给后端的两种方式

    <a-uploadv-model:file-list="fileList":show-upload-list="false":multiple="true":before-upload="beforeUpload":customRequest="selfUpload"accept=".png,.jpg"><a-button> 上传图片 </a-button></a-upload>

第一种formDate

/*** 发送post请求(特殊)* @param {string} url 地址* @param {object} data 请求数据* @param {Function} done 成功回调* @param {Function} fail 失败回调(可选)*/postAdmin(Url, params, data, done, fail) {const url = params ? `${Url}?${convertParams(params)}` : Url;return axios.post(url, data).then((data) => {return data.data}).catch((error) => {console.log(error);console.log(fail);});},

 // 上传文件beforeUpload(file) {this.fileList = [...this.fileList, file];// return false;},selfUpload() {this.handleUpload();},async handleUpload() {if(this.fileList.length == 0) {this.$message.error('请上传文件')return false}const formData = new FormData();this.fileList.forEach((file) => {formData.append("files", file);});console.log(formData);const res = await this.$api.batchUploadDrillImage({ drillId: parseInt(sessionStorage.getItem("drillid")) },formData);this.$message.success(res);console.log(res);},

第二种

selfUpload({file}){const base64 = new Promise(resolve => {const fileReader = new FileReader()fileReader.readAsDataURL(file)fileReader.onload = () => {resolve(fileReader.result)this.imageUrl = fileReader.resultthis.UploadSmallPic(fileReader.result)}})},// 上传图片async UploadSmallPic(str){str = str.replace(/^data:image\/\w+;base64,/, "")const res = await this.$api.batchUploadDrillImage({drillId:parseInt(sessionStorage.getItem("drillid")),pic: str})console.log(res);},// 图片上传前限制beforeUpload(file) {const isJpgOrPng = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJpgOrPng) {this.$message.error('您只能选择JPG的图片格式上传');}if (!isLt2M) {this.$message.error('图片必须小于2MB');}return isJpgOrPng&&isLt2M;},

vue前端上传文件给后端的两种方式相关推荐

vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
SpringBoot上传文件到后端服务器或云服务器（七牛云、阿里云、腾讯云等等都是一样的操作步骤）
文章目录一.新建SpringBoot项目 1.pom.xml 2.application.yml 3.配置Swagger3 4.统一返回类Result 5.统一异常响应ErrorCode 二.上传文 ...
关于前端上传文件到七牛云的一些笔记
关于前端上传文件到七牛云的一些心得前言申请账户具体步骤算了小技巧七牛云没有监控上传进度和上传错误的 API ?(JS SDK) React 更新 state 中的数组不能触发动画效果? 前 ...
前端上传文件status状态为0？
前端上传文件 status=0 ??? status状态码基本上是 100.200.300.400.500 , 0 还是第一次遇到过 status为0说明接口在调用之前,就已经取消了.也就是说根 ...
关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。
文章出处:Jiangkuobo,微信:jkb_267460 文章目录前言一.使用elementPlus上传图片,出现的问题. 二.验证猜想 1.验证方式: 2.测试结果: 3.我的猜想与验证三. ...
关于使用jQuery前端上传文件
关于使用jQuery前端上传文件我们都知道 html中file类型的input可以直接读取本地的文件; 如果使用form表单的话,那么action = url 这就会上传完文件会刷新页面,返回值就会 ...
vue实时上传文件进度条
vue实时上传文件进度条 //上传文件组件 <el-uploadaction:show-file-list="false":before-upload="uploa ...
html5封装图片,简单封装前端上传文件/图片
前言最近项目会一直用到各种类型的上传文件的功能, 所以就基于elment-ui简单的做了一个封装, 比较好用正文引入 import TestUpload from '../components/ ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...

vue前端上传文件给后端的两种方式

vue前端上传文件给后端的两种方式相关推荐

最新文章

热门文章