vue上传图片到服务器
https://blog.csdn.net/qq_29712995/article/details/78839093(copy)
HTML代码:
<input accept="image/*" name="img" id="upload_file" type="file">
JS代码:
var file = document.getElementById("upload_file").files[0];
var r = new FileReader(); //本地预览
r.onload = function(){
console.log(r.result);//图片的base64
}
r.readAsDataURL(file); //Base64
2.通过form表单提交。
form表单提交图片会刷新页面,也可以是form绑定到一个隐藏的iframe上,可以实现无刷新提交数据。
HTML代码:
<input accept="image/*" name="img" id="upload_file" type="file">
JS代码:
import axios from 'axios'
var file = document.getElementById("upload_file").files[0];
var formdata1=new FormData();// 创建form对象
formdata1.append('img',file,file.name);// 通过append向form对象添加数据,可以通过append继续添加数据
//或formdata1.append('img',file);
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
axios.post('/xapi/upimage',formdata1,config).then(response)=>{ //这里的/xapi/upimage为接口
console.log(response.data);
})
这里注意的是,设置 的Content-Type
查看是否成功:按F12-network-点击对应的那个请求
可以看到
---------------------
作者:小江_
来源:CSDN
原文:https://blog.csdn.net/qq_29712995/article/details/78839093
版权声明:本文为博主原创文章,转载请附上博文链接!
相关文章
- vue - webpack
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- 【Vue】单文件的组件(.vue)代码实例
- tab切换vue中created方法执行两次
- Vue - 本地上传 Excel 文件页面表格预览(配合 ElementUI / 带分页)
- Vue 配置多页面,去掉.html后缀的技巧
- 【Python】+Django+Vue+Element UI 实现图片上传功能
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- (32)Vue模板语法
- (24)打鸡儿教你Vue.js
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- Vue知识点总结(10)——全局组件的创建和使用(超级详细)
- vue 3的生命周期 html 的
- vue使用swiper模块滑动时报错:[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- vscode快速生成vue代码---创建Vue代码模板
- Vue 之 Vue Cli 创建 Three js 工程( 网页 3D )的简单整理(一些注意事项)
- 04-vue-cli-启动配置和静态资源配置
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- Vue开发实例(16)之创建标签页
- vue-解决Vue打包上线之后部分CSS不生效的问题