vue实现axios图片上传功能


Posted in Javascript onAugust 20, 2019

vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传。

在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型。

经过多次摸索总结了以下经验,以供参考。

首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js。

我们的qs序列化和数据拦截写在index.js中

import axios from "axios";
import config from "@/config";
import router from "@/router";
import validate from "@/util/validate";
import Qs from "qs";
const request = axios.create({
 baseURL: config.hostUrl,
 timeout: 52000,
 transformRequest: [
  (data) => {
   return data instanceof FormData ? data : Qs.stringify({ //此处的data类型判断为重要点,
    ...data
   });
  }
 ]
});
request.interceptors.request.use( //请求拦截
 config => {
  return config;
 },
 error => Promise.error(error)
);

request.interceptors.response.use(// 响应拦截器
 async function (res) {
   if (res.status === 200) {
    return Promise.resolve(res.data);
   } else {    
    return Promise.reject(res.data);
   }
  },
  async function (error) {
   const {
    response
   } = error;
   if (response) {   
    return Promise.reject(response);
   } else {    
   }
  }
);
export default request;

写好上面的代码在api.js 请求接口就无须做任何操作了,下面示例:

async upImgs(files) { // 我的相册图片上传    
    return (await request.post('/basis/uploadFile', files)).response
     },

页面调用接口

async file_up(event) {
   //图片预览
   try {
    let res = null;
    this.file = [...event.target.files];
    for (let i = 0, f; (f = this.file[i]); i++) {
     if (i >= 8 || this.imgs.length >= 8) {
      return;
     }
     let fileImg = new FormData();
     fileImg.append("file", f);
     res = await this.$api.upImgs(fileImg); //这里是调用api处, 此处为多图上传,供参考
     if (res.result) {
      this.imgs.push(res.result.absoluteFilePath);
     }
    }
   } catch (err) {
    this.$toast({
     message: err.message,
     duration: 1200
    });
   }
  }

是不是很简单呀!反正我是实现了,有问题可以讨论下哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js+Flash实现访问剪切板操作
Nov 20 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
微信开发 微信授权详解
Oct 21 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 #Javascript
vue+element-ui+axios实现图片上传
Aug 20 #Javascript
vue element upload实现图片本地预览
Aug 20 #Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 #Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 #Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 #Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 #Javascript
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
js实现多张图片延迟加载效果
2017/07/17 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python科学画图代码分享
2017/11/29 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
学习雷锋标语
2014/06/25 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
负责培养人意见
2015/06/05 职场文书
太空授课观后感
2015/06/17 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server