vue+axios上传文件的几种方式及步骤（以上传图片为例）

1、用js的formData对象上传（服务器返回url地址）

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>


methods: {update(e){let file = e.target.files[0];let param = new FormData(); //创建form对象param.append('file',file);//通过append向form对象添加数据console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去let config = {headers:{'Content-Type':'multipart/form-data'} //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值}; //添加请求头axios.post('http://127.0.0.1:8081/upload',param,config).then(response=>{console.log(response.data);})}}

2、Form表单上传（服务器返回url地址）

<form><input type="text" value="" v-model="name" placeholder="请输入用户名"><input type="text" value="" v-model="age" placeholder="请输入年龄"><input type="file" @change="getFile($event)"><button @click="submitForm($event)">提交</button>
</form>

 data: {name: '',age: '',file: ''},methods: {getFile(event) {this.file = event.target.files[0];console.log(this.file);},submitForm(event) {event.preventDefault();let formData = new FormData();formData.append('name', this.name);formData.append('age', this.age);formData.append('file', this.file);let config = {headers: {'Content-Type': 'multipart/form-data'}}axios.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {if (response.status === 200) {console.log(response.data);}})}}

注意：表单form加上属性enctype="multipart/form-data"。客服端发送的头部就是：

Content-type: multipart/form-data, boundary=AaB03x--AaB03x//后面这个是浏览器假的随机值

提交成功客服端还能看到以下图片相关内容：

3、获取相机图片的base64

    /*** 获取用户拍照的图片信息*/async Photograph() {// 获取用户拍照的图片名字，显示到页面上this.fileName = this.$refs.photoref.files[0].name;// 获取图片base64 代码，并存放到 base64ImgData 中this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);},/*** 返回用户拍照图片的base64*/FileReader(FileInfo) {// FileReader 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReaderlet reader = new FileReader();// readAsDataURL 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURLreader.readAsDataURL(FileInfo);// 监听读取操作结束/* eslint-disable */return new Promise(resolve => (reader.onloadend = () => resolve(reader.result)));}

vue+axios上传文件的几种方式及步骤（以上传图片为例）相关推荐

django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...
django文件上传到服务器,django上传文件的三种方式
Django文件上传需要考虑的重要事项文件或图片一般通过表单进行.用户在前端点击文件上传,然后以POST方式将数据和文件提交到服务器.服务器在接收到POST请求后需要将其存储在服务器上的某个地方.D ...
vue前端实现上传文件的两种方式
1.使用form表单的形式第一种方式就是使用FormData的方式进行上传 html代码: <el-form :model="upform" :rules="up ...
flask中使用FileField上传文件的两种方式+前端页面上传文件（flask三种上传文件方式）
文章目录上传文件方式一: 1.index.html文件: 2.主文件main.py: 上传文件方式二: 1.index2.html文件: 2.main.py文件: 上传文件方式三: 1.index3 ...
java spring上传_SpringMVC上传文件的三种方式
直接上代码吧,大伙一看便知前台: pageEncoding="utf-8"%> Insert title here 采用流的方式上传文件采用multipart提供的fil ...
SpringMVC上传文件的三种方式
/** 通过流的方式上传文件* @RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象*/@Reques ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
WebUploader 上传文件的两种方式（手动上传，自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
Linux远程上传文件的三种方式详解
1.FileZilla(直接拖) https://www.filezilla.cn/download/client 2.lrzsz 2.1.yum install lrzsz 2.2.在CRT中配置上 ...

vue+axios上传文件的几种方式及步骤（以上传图片为例）

1、用js的formData对象上传（服务器返回url地址）

3、获取相机图片的base64

vue+axios上传文件的几种方式及步骤（以上传图片为例）相关推荐

最新文章

热门文章