<el-upload class="inline" ref="uploadImgRef" :http-request="uploadImg" :auto-upload="false" :accept="'.jpg,.png'"> <template #trigger> <el-button type="primary" plain> 选择图片 </el-button> </template> </el-upload> <el-button type="primary" @click="enableClick(formRef)">启用</el-button>
http-request : 覆盖默认的 Xhr 行为,允许自行实现上传文件的请求
type中写法:
export interface IPromisdata<T> { code?: number; msg?: string data: T } // 标准图片上传 export interface IAddPictureRes { imgId: string } export type ResponsePostureData<T> = Promise<IPromisdata<T>>
api写法:
//引用type
export const addPicture = (data: { file: File }): ResponsePostureData<IAddPictureRes> => { const fd = new FormData() fd.append('file', data.file) return request({ url: '/img/v1/add', method: 'POST', data: fd }) }
script写法:
import type { UploadInstance } from 'element-plus' const uploadImgRef = ref<UploadInstance>() // 上传图片请求 const uploadImg = async ({ file }: { file: File }) => { const res = await addPicture({ file }) if (res.code === 200) { ElMessage.success('图片上传成功') } else { ElMessage.error(res.msg) } } // 启用 const enableClick = (formEl: FormInstance | undefined) => { if (!formEl) return formEl.validate((valid) => { if (valid) {// 图片上传 上传到服务器 uploadImgRef.value!.submit() } else { return false } }) }
外部方法 : submit 手动上传文件列表
标签:const,elementui,data,ts,export,file,vue3,return,上传 From: https://www.cnblogs.com/ywlying/p/16719144.html