vue实现axios图片上传功能

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
    });
   }
  }

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

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

赞 (0)

相关推荐

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • vue+element-ui+axios实现图片上传

    本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples<

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

  • Vue + Element UI图片上传控件使用详解

    Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • vue实现axios图片上传功能

    vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传. 在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型. 经过多次摸索总结了以下经验,以供参考. 首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js. 我们的qs序列化和数据拦截写在index.js中 import axios from "axios"; import config fr

  • Vue使用axios图片上传遇到的问题

    Vue使用axios图片上传遇到的问题

    FormData是个什么鬼? 经过多方搜索调查了解,这个神奇的东西是XMLHttpRequest Level 2 新增的一个对象,于2008年2月提出,可以利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件,可以把所有表单元素的name与value组成一个queryString,提交到后台. 划重点: 可以把所有表单元素的name与value组成一个queryString,提交到后台.这不就是后端所谓的转换数据格式,按格式提交呗,前后端分离肯定是异步提交,这个就可以很好的去解决

  • vue实现简单图片上传功能

    vue实现简单图片上传功能

    本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 就是给自己留个参照,有什么不合理的地方请大家指出来,然后调整 1.效果展示 2.html相关的代码展示 <div class="form-list">        <label class="label-one">商品图片</label>        <div class="add-picture">        

  • vue项目实现图片上传功能

    本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .uploadimg{ width:100px; height:100px; border-r

  • 详解vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • vue+element实现图片上传及裁剪功能

    本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下 随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 1 .安装 vue-cropper npm install vue-cropper 2.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 具体可见官网 demo <template> <div> <h1&

  • Vue formData实现图片上传

    本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下 import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new Promise((resolve, reject) => { let file =

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

随机推荐