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

最新推荐文章于 2024-09-11 10:09:58 发布

舜岳

最新推荐文章于 2024-09-11 10:09:58 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： elementui vue upload el-upload

本文链接：https://blog.csdn.net/qq_41614928/article/details/115554049

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

自定义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>