公司网站建设怎么入账,网站开发与应用案例,易尔通做网站怎么样,优秀网站展示1.前言#xff1a; 使用element ui有很多便捷之处#xff0c;但是由于是封装的组件和自己写还是有些许的不一样#xff0c;这里主要解决几个问题。 1. 如何获取子组件实例 2. 如何自定义上传方法 2.两个问题#xff1a;
⛺️ 获取子组件实例
实际上vue一般通过ref获取子组…1.前言 使用element ui有很多便捷之处但是由于是封装的组件和自己写还是有些许的不一样这里主要解决几个问题。 1. 如何获取子组件实例 2. 如何自定义上传方法 2.两个问题
⛺️ 获取子组件实例
实际上vue一般通过ref获取子组件实例。 不过每个版本都有区别甚至ts和js版本也有细微区别。
el-dialogtitle上传v-modeldialogVisiblewidth30%:before-closehandleCloseel-uploadclassupload-demodrag:before-uploadbeforeUploadrefimg:http-requesttoUploadImg:limit 1multiple falseelement-loading-text正在上传el-icon :size20Upload //el-icondiv classel-upload__text将图片拖到此处或em点击上传/em/divdiv classel-upload__tip slottip/div/el-uploadspan slotfooter classdialog-footer/span/el-dialogconst img refUploadInstance();
const handleClose () {img.value?.clearFiles();dialogVisible.valuefalse;
}我们这里需要执行elementui-plus的清除文件的方法在vue3中是需要通过声明一个相同变量的ref获取实例的。这是vue3和vue2的区别 而在ts中需要给这个组件一个上传实例的泛型UploadInstance这个类型是elementui提供的当然不加也可以但是费劲很多因为ts检查比较严格因为ts不知道你的这个组件是什么语法提示就没有了。
2 ⛺️ 自定义上传
在较为大型的项目中这种到处手写路径的方法无疑是增加了耦合增加了代码复杂度。 最好统一管理api请求接口模块。并且上传数据也不是自己能够决定的 使用这个api可以覆盖文件的默认上传方法。这里我们声明使用http-request声明了toUploadImg方法自己实现上传文件的方法并且使用formdata上传额外的参数。
el-dialog title上传v-modeldialogVisiblewidth30%:before-closehandleCloseel-uploadclassupload-demodrag:before-uploadbeforeUploadrefimg:http-requesttoUploadImg:limit 1multiple falseelement-loading-text正在上传el-icon :size20Upload //el-icondiv classel-upload__text将图片拖到此处或em点击上传/em/divdiv classel-upload__tip slottip/div/el-uploadspan slotfooter classdialog-footer/span/el-dialogconst toUploadImg (param: UploadRequestOptions) {debuggerconst 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;
}我们注意到这个api提供的参数类型是UploadRequestOptions,包含众多属性我这里之获取了文件名可以根据自己需要获取修改。
