精华内容
下载资源
问答
  • vue+axios+element 图片上传 默认使用element的el-upload action传入上传图片的的后台路径,data传入所需的额外参数 <template> <el-upload class="upload-demo" drag :action="uploadUrl" ...
    vue+axios+element 图片上传
    1. 默认使用element的el-upload
    2. action传入上传图片的的后台路径,data传入所需的额外参数
    <template>
    	<el-upload
               class="upload-demo"
               drag
               :action="uploadUrl"
               :data="data"
               :on-change="onChange"
               multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
    </template>
      export default {
            name: 'upload',
            computed: {
                uploadUrl: function() {
                    // 上传地址
                    let uploadImage = '/index.php/uploadImage';
                    return uploadImage;
                },
                // 额外参数
                data() {
                    return {
                        'atustr': 'atustr',
                        'token': 'token',
                        'sign':'sign'
                    };
                }
            },
        };
    
    1. 不使用action上传

      • 在接口中不需要单独设置headers
      <el-upload
                 :class="{ hideUpload: hideUpload }"
                 :auto-upload='false'
                 action="#"
                 :on-change="handleChange">
          <i class="el-icon-plus"></i>
      </el-upload>
       export default {
           name: 'upload',
           methods: {
                  handleChange(file, fileList) {
                      let atustr = 'atustr';
                      let token = 'token';
                      let sign = 'sign';
                      // 使用 FormData
                      let fd = new FormData();
                      fd.append('image', file.raw);
                      fd.append('atustr', 'atustr');
                      fd.append('token', 'token');
                      fd.append('sign', 'sign');
                      // 二次封装的 axios 
                      uploadImage(fd).then(res => {
                          console.log(res);
                      });
                  },
              }
      }
      
      
      • request.js

        // 使用axios
        import axios from 'axios';
        const service = axios.create({
            timeout: 5000
        });
        
        service.interceptors.request.use(
            config => {
                return config;
            },
            error => {
                console.log(error);
                return Promise.reject();
            }
        );
        service.interceptors.response.use(
            response => {
                if (response.status === 200) {
                    return response.data;
                } else {
                    Promise.reject();
                }
            },
            error => {
                console.log(error);
                return Promise.reject();
            }
        );
        export default service;
        
      • 上传接口

        import request from '@/utils/request';
        export function uploadImage(data) {
            return request({
                url: '/index.php/uploadImage',
                method: 'post',
                data: data
            });
        }
        
    跨域问题
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:3002',//要访问的后端接口
        ws: true,        //如果要代理 websockets,配置这个参数
        secure: false,  // 如果是https接口,需要配置这个参数
        changeOrigin: true,  //是否跨域
        pathRewrite:{
          '^/api':'/api'
        }
      }
    },
    
    展开全文
  • vue + element Upload + axios文件上传 转载于:https://juejin.im/post/5d1f0786e51d45554877a644

    vue + element Upload + axios文件上传

    转载于:https://juejin.im/post/5d1f0786e51d45554877a644

    展开全文
  • http-request:覆盖默认的上传行为,可以实现自定义上传 on-exceed:文件超出个数限制时的钩子 <el-upload class='image-uploader' :multiple='false' :auto-upload='true' list-type='text' :show-file-list='...

    http-request:覆盖默认的上传行为,可以实现自定义上传
    on-exceed:文件超出个数限制时的钩子

    <el-upload class='image-uploader' :multiple='false' :auto-upload='true' list-type='text' :show-file-list='true'
    	:before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed"
    	:http-request="uploadFile">
    	<i class="el-icon-upload"></i>
    	<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
    	<div class="el-upload__tip" slot="tip">一次只能上传一个文件,仅限text格式,单文件不超过1MB</div>
    </el-upload>
    
    
    // 上传文件之前的钩子
    beforeUpload(file) {
    	//判断文件格式
    	let hz = file.name.split(".")[1]
    	if (hz != 'xlsx' && hz != 'xls') {
    		return false;
    	}
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
    	this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`)
    },
    // 上传文件
    uploadFile(item) {
    	let fileObj = item.file
    	const form = new FormData()// FormData 对象
    	form.append('upload', fileObj)// 文件对象  'upload'是后台接收的参数名
    	$.ajax({
    		url: "http://",
    		data: form,
    		type: "POST",
    		contentType: "multipart/form-data",
    		processData: false, //告诉jquery不要对form进行处理
    		contentType: false, //指定为false才能形成正确的Content-Type
    		success: function (res) {}
    	})
    }
    
    

    如果是axios的话。

      uploadFile(item) {
                let fileObj = item.file;
                console.log(fileObj);
                const form = new FormData(); // FormData 对象
                form.append('sexcel', fileObj); // 文件对象  'upload'是后台接收的参数名
                this.$http.post('/passengerTraffic-admin/pc/importApi/importStation', form).then((res) => {
                    if (res.data.code == 1) {
                        this.$message.success(res.data.msg);
                        this.upload = false;
                        this.$refs.upload.clearFiles();
                        this.getCList();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
                }
    
    展开全文
  • 最近接到一个需求,需要做一个上传文件和下载文件的功能,主要使用的场景是用户上传文件,和下载样例文件,上传和下载的请求都需要带上 请求头 token,主要使用:axios,element上传组件进行自定义上传;主要操作代码如下:...

    vue中使用axios 结合element-ui 上传组件,上传文件

    最近接到一个需求,需要做一个上传文件和下载文件的功能,主要使用的场景是用户上传文件,和下载样例文件,上传和下载的请求都需要带上 请求头 token,主要使用:axios,element的上传组件进行自定义上传;主要操作代码如下:

    上传文件

    	<el-upload
                class="upload-demo"
                ref="uploadFilder"
                :action="uploadUrl"
                :headers="uploadHeader"
                :on-change="addFile"
                :file-list="fileList"
                accept=".json"
                :before-upload="beforeUpload"
                :limit="1"
                :auto-upload="false"
                :on-success="uploadSuccess"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传.json后缀的文件</div>
         </el-upload>
    

    只要使用的几个属性有
    属性使用介绍
    上传组件的绑定值 定义在 vue datafileList:[];
    请求地址和请求头变量都在 computed中定义:

    computed: {
            uploadUrl: function () {
                return baseUrl + this.folderId; 
                // 返回基础的请求地址和文件夹id拼接的请求地址
                // 实例:   "/upload/huejiw95ec16147a3965b9f";
            },
            // 上传的文件请求头,如果不需要请求头,可以不设置这个属性
            uploadHeader: function () {
                if (authorization) {
                 // authorization是一个全局变量,挂载在window上的
                    return {
                        Authorization: "Bearer " + authorization.token,
                    };
                } else return {};
            }
        }
    

    方法的处理

    methods:{
    	addFile(file, fileList) {
                this.fileList = fileList;
                // 这里我没有做文件上传大小的处理
            },
        beforeUpload(file) {
                let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
                const fileName1 = fileName === "json";
                if (!fileName1) {
                    this.$message({
                        message: "上传文件只能是 .json格式!",
                        type: "warning",
                    });
                }
                // 以上是对文件格式的筛选,如果 el-upload组件 配置了accept 属性的话就可以不用做以上的判断处理
                return fileName1;
            },
            // 上传成功的处理,这里长传成功之后需要关闭弹框
            uploadSuccess(res, file, fileList) {
                if (res.code == 200) {
                    this.$message({
                        message: "上传文件成功!",
                        type: "success",
                    });
                    this.dialogShow = false;
                } else {
                    this.$message({
                        message: "上传文件失败!",,
                        type: "error",
                    });
                    this.$refs.uploadFilder.clearFiles(); // 清空组件的文件
                }
                this.fileList = []; // 清空绑定数据
            },
       },
       
    

    以上操作就可以完成自定义的文件上传
    注意:

    1. 自定义文件上传 需要 将auto-upload属性设置为 false
    2. 必须配置 action 属性
    3. change事件里面的赋值操作,确保文件被正确获取并提交,实际上配置了file-list执行也可以不需要再重新赋值

    element-ui 的上传组件的详细使用文档可以参考 element-ui 官方文档

    本文章是以记录为出发点,如果有说的不正确的地方,还希望大家可以指出来,大家共同进步!!!

    展开全文
  • 上传较大附件(如视频)时应用 主要使用方法 axios-cancelToken:axios的config中提供了一个cancelToken属性,可以通过传递一个新的CancelToken对象来在请求的任何阶段关闭请求。 axios-onUploadProgress :监控请求...
  • 主要为大家详细介绍了vue+element-ui+axios实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1. 上传模板EXCEL,使用formData提交 2. 提交成功后,接口返回文件流,前端写入EXCEL实现下载 ps: 使用表单提交的原因是,excel文件中包含ID,后端需要读取ID查询记录后,再把数据流通过接口返回 代码实现 1. ...
  • 用:http-request方式提交,element官方的解释:http-request 覆盖默认的上传行为,可以自定义上传的实现 第一种体提交方式,直接在action属性中写出后台地址即可,但是这种方式无法获取后台响应结果 要想提交后获取...
  • Vue项目中使用axioselement ui实现文件上传时的进度显示 html代码如下: <div v-if="progressSeen"> <el-progress :text-inside="true" :stroke-width="15" :percentage="progress" status="success...
  • 在使用element UI的upload组件上传文件时,遇到一些问题,网上的说法不尽如是,在此记录 其实最主要的估计就是axios相关的问题,因我们平时开发的vue项目都是封装过axios后进行api的调用,但上传操作跟一般的api...
  • 今天在使用element的文件模块时,使用了手动上传的方法,官网上的示例是直接使用this.$refs.upload.submit()直接请求后台,我测试过了,是可以获取到数据的,但是我不知道这个方法如何处理后台传过来的参数,就产生...
  • 一、Element 组件 <el-upload style="height: 32px;margin-left: 10px;float: left" action="" class="upload-demo" ref="uploadRef
  • [图片说明](https://img-ask.csdn.net/upload/202003/26/1585214707_616742.png)这是axios中的参数,查看头,发现每个属性前面都多一个form![图片说明]...
  • 项目用的是Vue框架,UI库使用的是element UI,前后端交互请求使用的是Vue官方推荐的axios。其中,UI方面主要使用了element UI库中的Upload文件上传组件、Progress进度条组件。 回到顶部 2.文件上传 文件上传功能...
  • vue+element-ui+axios 实现图片上传小记

    千次阅读 2019-07-26 12:08:21
    <script src="https://unpkg.com/axios/dist/axios.min.js"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> ...
  • // 上传组件 ```javascript <el-upload class="upload-demo" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> // 进度条组件 ...
  • 前端技术:vue,element-ui,axios 后台技术:springboot 本篇博客只给出关键的代码,提供思路,完全的涉及保密不方便提供 一,上传上传element组件代码,支持多文件,拖动文件进行上传: <!--选择文件-...
  • vue+axios+element导入excel

    2019-11-22 16:08:55
    总结:type类型是file的input框上传的文件,都可以用formData对象上传,我的代码很简单,非常简单,very简单,没有网上的复杂,所以分享出来,供大家参考。 1.接口部分 注意点1:必须设置headers的content-type为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,744
精华内容 1,497
关键字:

axioselement上传