vue项目中使用axios上传图片等文件操作_axios上传图片,axios上传图片 - CSDN文库

91 浏览量更新于2023-03-03 评论收藏 49KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue项目中使用项目中使用axios上传图片等文件操作上传图片等文件操作

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用

axios上传图片等文件操作，需要的朋友参考下吧

axios 简介简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF

首先安装首先安装axios：：

1.利用npm安装npm install axios –save

2.利用bower安装bower install axios –save

3.直接利用cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

一般情况上传照片有两种方式：一般情况上传照片有两种方式：

1.本地图片转换成base64，然后通过普通的post请求发送到服务端。

　　操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法

2.通过form表单提交。

　　form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。

这里只讲解一下第二种方式：

html代码：

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

js代码：

import axios from 'axios'

// 添加请求头

update (e) { // 上传照片

var self = this

let file = e.target.files[0]

/* eslint-disable no-undef */

let param = new FormData() // 创建form对象

param.append('file', file, file.name) // 通过append向form对象添加数据

param.append('chunk', '0') // 添加form表单中其他数据

console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去

let config = {

headers: {'Content-Type': 'multipart/form-data'}

}

// 添加请求头

axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)

.then(response => {

if (response.data.code === 0) {

self.ImgUrl = response.data.data

}

console.log(response.data)

})

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38535848

粉丝: 8
资源: 926

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈