Element-upload组件不使用action属性上传封装

新建 UploadFile组件

<template>
  <div class="ming-upload">
    <el-upload
               v-loading="loading"
               class="avatar-uploader"
               action="#"
               :show-file-list="false"
               :http-request="HttpRequest"
               >
      <img v-if="headimg" :src="headimg" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

在action中写入#或者/,最重要的一步就是添加http-request属性

http-request：覆盖默认的上传行为，可以自定义上传的实现

在父组件引入UploadFile组件

<template>
  <upload-file :headimg="userForm.headimg" />
</template>

<script setup>
  import UploadFile from '@/components/UploadFile'
</script>

编写HttpRequest方法

const HttpRequest = (data) => {
  loading.value = true
  
  // new 一个formdata 对象 将我们的参数和文件赋值进去
  const formdata = new FormData()
  formdata.append('file', data.file)
  formdata.append('type', 'img')
  
  // 这里我用的是 vuex 调用dispatch，也可以直接些Axios
  Store.dispatch('common/uploadFile', formdata).then(res => {
    if (+res.code === 200) {
      // 把请求结果给图片属性src赋值
      heading.value = res.data
    }
    loading.value = false
  }).catch(_ => {
    loading.value = true
  })
}

到这 你会发现 图片上传成功了，但是图片没有更换还是空白或者还是之前的图片,甚至还报了个错怎么回事呢？

Vue规则：组件不能修改props外部数据

Vue中的 props 是单向向下绑定的
即：每次父组件更新时，子组件中的所有 props 都会刷新为最新的值。
但是如果在子组件中修改 props ，Vue会向你发出一个警告。（无法通过修改子组件的props来更改父组件。）

于是我们得借助Vue的语法糖来帮我们实现更新父组件的值：.sync修饰符

.sync是一个语法糖。是父组件监听子组件更新某个props的请求的缩写语法。

具体操作如下：

1. 在父组件的heading属性上加上.sync修饰符

<upload-file  :headimg.sync="userForm.headimg" />

2. 在子组件拿到接口返回的数据后更新父组件的值

function updateHeading(img) {
  emit('update:headimg', img)
}

这样就完成了对el-upload组件的基本封装了。（在需要使用的页面直接引入即可。）

具体代码：

<template v-if="type==='avatar'">
<el-upload
           v-loading="loading"
           class="avatar-uploader"
           action="#"
           :show-file-list="false"
           :http-request="HttpRequest"
           >
  <img v-if="headimg" :src="headimg" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script setup>
import { ref, computed } from 'vue'
import Store from '@/store'

const loading = ref(false)

const props = defineProps({
  headimg: {
    type: String,
    default: () => ''
  }
})

const emit = defineEmits(['updateHeading'])

const headimg = computed(() => {
  return props.headimg
})
const HttpRequest = (data) => {
  loading.value = true
  const formdata = new FormData()
  formdata.append('file', data.file)
  formdata.append('type', 'img')
  Store.dispatch('common/uploadFile', formdata).then(res => {
    if (+res.code === 200) {
      updateHeading(res.data.path)
    }
    loading.value = false
  }).catch(_ => {
    loading.value = true
  })
}

function updateHeading(img) {
  emit('update:headimg', img)
}

</script>

<template>
 ....
  <upload-file  :headimg.sync="userForm.headimg" />
 ....
</template>