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

太过爱你忘了你带给我的痛 2022-11-17 13:41 112阅读 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 条评论，112人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 Element+Axios+SpringBoot上传文件

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

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

相关 strut2 自定义文件上传错误信息

在文件上传过程中我们可以指定拦截器对文件类型、后缀名、大小进行设定，action中的配置： <interceptor-ref name="fileUpload"> <pa

小咪咪/ 2022年08月27日 01:23/ 0 赞/ 112 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关自定义文件上传异常

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

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