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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
javascript之ESC(第二类混淆)
May 06 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
在模板页面的js使用办法
Apr 01 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
详解Vue之计算属性
Jun 20 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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简单的上传类分享
2016/05/15 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python字典的常用操作方法小结
2016/05/16 Python
eclipse创建python项目步骤详解
2019/05/10 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python基于openpyxl生成excel文件
2020/12/23 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
编辑求职信样本
2013/12/16 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
个人创业事迹材料
2014/12/30 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Moment的feature导致线上bug解决分析
2022/09/23 Javascript