elementui-plus+ts+axios使用el-upload组件自定义上传_elementuiplus自定义上传

1.前言：

使用element ui有很多便捷之处，但是由于是封装的组件和自己写还是有些许的不一样，这里主要解决几个问题。

1. 如何获取子组件实例
2. 如何自定义上传方法

2.两个问题：

1. ⛺️ 获取子组件实例

实际上vue一般通过ref获取子组件实例。
不过每个版本都有区别，甚至ts和js版本也有细微区别。

<el-dialog
          title="上传"
          v-model="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-upload
            class="upload-demo"
            drag
            :before-upload="beforeUpload"
            ref="img"
            :http-request="toUploadImg"
            :limit = 1
            multiple = false
            element-loading-text="正在上传"
        >
          <el-icon :size="20">
            <Upload />
          </el-icon>
          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const img = ref<UploadInstance>();
const handleClose = () => {
  img.value?.clearFiles();
  dialogVisible.value=false;
}
1
2
3
4
5

1. 我们这里需要执行elementui-plus的清除文件的方法，在vue3中是需要通过声明一个相同变量的ref获取实例的。这是vue3和vue2的区别

2. 而在ts中需要给这个组件一个上传实例的泛型UploadInstance，这个类型是elementui提供的，当然不加也可以，但是费劲很多，因为ts检查比较严格，因为ts不知道你的这个组件是什么，语法提示就没有了。

2 ⛺️ 自定义上传

在较为大型的项目中，这种到处手写路径的方法无疑是增加了耦合，增加了代码复杂度。
最好统一管理api请求接口模块。并且上传数据也不是自己能够决定的，

使用这个api可以覆盖文件的默认上传方法。这里我们声明使用http-request声明了toUploadImg方法，自己实现上传文件的方法，并且使用formdata上传额外的参数。

<el-dialog 
          title="上传"
          v-model="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-upload
            class="upload-demo"
            drag
            :before-upload="beforeUpload"
            ref="img"
            :http-request="toUploadImg"
            :limit = 1
            multiple = false
            element-loading-text="正在上传"
        >
          <el-icon :size="20">
            <Upload />
          </el-icon>
          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const toUploadImg = (param: UploadRequestOptions) => {
  debugger
  const file = param.file;
  const currentPath = "/" + path.value.join("/");
  const formData = new FormData();
  formData.append('file', file); // 这里可以根据需要设置其他表单字段
  formData.append('path',currentPath);
  uploadImg(formData).then((res) => {
    if(res.statusCode === 200){
      ElMessage.success('上传成功');
    }
  })
  return formData;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

我们注意到这个api提供的参数类型是UploadRequestOptions,包含众多属性，我这里之获取了文件名，可以根据自己需要获取修改。