详解Vue+axios+Node+express实现文件上传(用户头像上传)

2024-04-27 05:49:28

Vue 页面的代码

<label for='my_file' class="theme-color">
 <mu-icon left value="backup"></mu-icon>
 修改头像
</label>
<input type="file" ref="upload" name="avatar" id='my_file' style="display:none;" accept="image/jpg" @change="changeAvatar" />

axios接口

let ChangeAvatar = (img) => axios({
 url: '/user/changeavatar',
 method: 'post',
 anync: true,
 contentType: false,
 processData: false,
 data: img
})

js部分调用封装的接口

 methods: {
  changeAvatar (event) {
   let img = event.target.files[0];
   let size = img.size;
   if (size > 3145728) {
    alert('请选择3M以内的图片！');
    return false;
   }
   let Form = new FormData();
   Form.append('avatar', img, this.avatar_name);
   API.ChangeAvatar(Form)
    .then((response) => {
     console.log(response)
    })
    .catch((error) => {
     console.log(error)
    })
  }
 }

在这里我并没有用form方式，而是将input隐藏，用label绑定input，当我们点击label的时候，也就点击了input
我将请求封装在了另一个文件里，为ChangeAvatar()函数，如果不封装，按常规写法一样是可以的
Form.append('avatar', img, this.avatar_name);第一个参数为input的name,第二个参数为文件对象，第三个参数为文件的名字
ajax new FormData() 方法提交文件时，不能用data:{a:1}的键值对方法提交，应当直接将文件对象提交data:FormData

后台node代码

const fileUpload = require('express-fileupload');
app.use(fileUpload());

app.post('/user/changeavatar', function(req, res) {
 console.log(req.files); // the uploaded file object
 let avatar = req.files.avatar;

 // Use the mv() method to place the file somewhere on your server
 avatar.mv('dist/static/img/avatar/'+req.files.avatar.name+'.jpg', function(err) {
  if (err)
   return res.status(500).send(err);

  res.send('File uploaded!');
 });
})

在这里我并没有用multer，而是用别人的npm包express-fileupload

代码运行，成功将图片上传到了指定目录

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue axios 中提交表单数据(含上传文件)

我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport
VUE axios上传图片到七牛的实例代码

浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界
vue axios 表单提交上传图片的实例

项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag
vue使用axios实现文件上传进度的实时更新详解

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s
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
VUE 更好的 ajax 上传处理 axios.js实现代码

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios'; //安装方法 npm install axios //或 bower install axios 当然也可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min
详解Vue+axios+Node+express实现文件上传(用户头像上传)

Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d
详解vue中使用express+fetch获取本地json文件

自己在做个vue小demo的时候,想模拟从服务器获取json数据的过程,一开始的想法是使用fetch直接获取本地的json文件,无论是install了json-loader还是把json文件放在index.html的目录下或webpck.config.js里output的目录下,但是fetch一直报找不到文件.然后决定用fetch向express服务器发送请求,由服务器返回json数据. express服务器先写一个简单的express服务器,只有一个接口,起到示例作用就行了.back.js如
详解vue axios用post提交的数据格式

vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以
详解vue axios中文文档

axios中文文档在用Vue做开发的时候,官方推荐的前后端通信插件是axios,Github上axios的文档虽然详细,但是却是英文版.现在发现有个axios的中文文档,于是就转载过来了! 原文地址 : https://github.com/mzabriskie/axios 简介版本:v0.16.1 基于http客户端的promise,面向浏览器和nodejs 特色浏览器端发起XMLHttpRequests请求 node端发起http请求支持Promise API 拦截请求和返回转化请
详解vue axios二次封装

这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了顺便封装了一下定义公共参数与引入组件: import axios from 'axios' import qs from 'qs' axios.interceptors.request.use(config => { //显示loading return config }, error => { return Promise.reject(error) }) axios
详解vue+axios给开发环境和生产环境配置不同的接口地址

为什么要配置不同的接口地址在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + tem
详解Vue文档中几个易忽视部分的剖析

针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components
详解Vue中Axios封装API接口的思路及方法

一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个
详解Vue ElementUI手动上传excel文件到服务器

概述具体需求场景如下: 选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来.官网也有手动上传的示例,通过 action="url" 传入地址的方式,但在实际项目中请求需要自己配置,下面具体说明实现的方法. 说明: 在上传文件到展示统计结果,我们后端给了两个接口:首先调用文件上传接口,上传成功后,根据后端返回的mark再调用统计结果接口. 属性设置 .vue文件 <el-row> <div class="e
详解Vue 单文件组件的三种写法

JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default class Cpn extends Vue{ counter = 0 //data add(){ //methods this.counter += 1 } } TS class写法 @Component export default class Cpn extends Vue{ @Prop(Number) sum : number

详解Vue+axios+Node+express实现文件上传(用户头像上传)

相关推荐

随机推荐