自定义element的el-upload文件上传请求

太过爱你忘了你带给我的痛 2022-11-17 13:41 137阅读 0赞

## 自定义element的el-upload文件上传请求 ##

<template>
    	<el-upload
    	  action="/ws-truck/messenger/upload/image" 
    	  :on-success="onSuccess"
    	  :http-request="httpRequest"
    	  name="file"
    	  class="upload-demo"
    	  with-credentials
    	  drag
    	></el-upload>
    </template>
    
    <script>
    export default { 
      methods:{ 
         httpRequest(options) { 
    	    return new Promise((resolve, reject) => { 
    	        const formData = new FormData()
    	        formData.append("file", options.file)
    	        $.ajax({ 
    	            url: '/upload/image',
    	            type: 'POST',
    	            data: formData,
    	            headers: { 
    	                'X-Requested-By': 'eshipping'
    	            },
    	            success: function (res) { 
    	              resolve(res)
    	            },
    	            error: function (err) { 
    	              reject(err)
    	            }
    	        })
    	      })
    	    }
    	  },
    	  onSuccess(response, file, fileList) { 
    	      if (response.success) { 
    		    const url = response.filePath
    	        this.$emit('update:images', url)
    	      }
    	    },
       }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 element ui 之 el-upload自定义上传方法

使用http-request 指令实现自定义上传, 使用该指令, on-success, on-error 指令是不会触发的直接上代码 <el-upload

迷南。/ 2022年12月22日 06:24/ 0 赞/ 183 阅读

相关自定义上传图片（自定义上传input样式）

1.Html文件 <!DOCTYPE html> <html lang="en"> <head> <meta chars

灰太狼/ 2022年12月20日 03:11/ 0 赞/ 161 阅读

相关自定义element的el-upload文件上传请求

自定义element的el-upload文件上传请求 <template> <el-upload action="/ws-truck/me

太过爱你忘了你带给我的痛/ 2022年11月17日 13:41/ 0 赞/ 138 阅读

相关 Element+Axios+SpringBoot上传文件

一、Element 组件 1、Element官网API https://element.eleme.cn//zh-CN/component/upload

r囧r小猫/ 2022年10月17日 13:44/ 0 赞/ 167 阅读

相关 Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部

缺乏、安全感/ 2022年08月28日 05:47/ 0 赞/ 4 阅读

相关 springmvc中自定义拦截器、文件上传

声明，使用JDK8、maven3.5.4、idea2018.2、spring5.0.7 > springmvc中的拦截器，用于拦截前端发起的请求； > > 当请求到达D

朱雀/ 2022年04月16日 04:07/ 0 赞/ 286 阅读

相关自定义方法限制上传图片（文件）的格式

import org.apache.catalina.core.ApplicationPart; import org.springframework.web.

水深无声/ 2022年04月16日 00:37/ 0 赞/ 268 阅读

相关 Ueditor自定义上传文件通过SpringMVC上传图片到FTP

一、修改Ueditor的config.json的文档图片访问路径前缀改成FTP对外暴露的访问地址 "imageUrlPrefix": "http://192.16

╰+攻爆jí腚メ/ 2022年02月27日 11:50/ 0 赞/ 347 阅读

相关 vue element-UI 自定义 Upload 上传

前端代码：action为必填，在下面的params中可以获取到，:http-request可以覆盖默认上传方式，调用自定义的上传方法 <el-tab-pane lab

柔情只为你懂/ 2021年07月27日 02:10/ 0 赞/ 549 阅读

相关自定义文件上传异常

一文件上传异常分析 1 制造异常将application.yml文件中的keyid改成错误的值，运行程序，执行上传阿里云sdk内部会抛出异常，并打印相关错误日志

Myth丶恋晨/ 2021年07月24日 11:05/ 0 赞/ 491 阅读