avue---upload 图片上传

<template><div class="formClass"><!-- :upload-after="uploadAfter" 可按需添加上传后钩子，这里先保留基础结构上传相关钩子：upload-before/upload-success/upload-exceed 等可根据需求补充 
uploadSized--超出大小    uploadExceed--超出数量--><avue-form ref="dataForm":option="options"v-model="dataForm":upload-before="handleUploadBefore":upload-success="handleUploadSuccess":upload-sized="uploadSized":upload-exceed="uploadExceed":upload-error="handleUploadError"></avue-form></div>
</template><script>
export default {name: 'YourComponentName', // 自定义组件名data() {return {// 表单数据dataForm: {omOrderNum: '', // 销售单号itemName: '', // 产品problemDescription: '', // 问题描述thumbUrl: [] // 图片，用于上传组件},// Avue 表单配置options: {// 基本属性配置align: 'left', // 表格列对齐方式headerAlign: 'left',border: false,emptyBtn: false,submitBtn: false,addBtn: false,viewBtn: false,delBtn: false,editBtn: false,columnBtn: false,refreshBtn: false,labelSuffix: '', // 删除表单 label 后缀 冒号tip: false, // 取消表格上方的多选提示labelWidth: 'auto',menuBtn: true,column: [// 其他列配置可继续在这补充...{label: '图片',prop: 'thumbUrl',type: 'upload',dataType: 'object',listType: 'picture-card',accept: 'image/*',limit: 3, // 最多上传 3 张fileSize: 5000, // 单张不超过 5M（5000KB）span: 24,propsHttp: {res: 'data' // 接口返回中文件地址所在字段},tip: '只能上传图片，且单张大小不超过5M',action: 'web/common/file/upload', // 上传接口地址// autoUpload: false // 若需手动触发上传可开启}]}}},methods: {// 上传前拦截，进行手动调接口，因为要获取接口返回值handleUploadBefore(file, done, loading, column) {const formData=new FormData()formData.append('file',file)upload(formData).then((res)=>{loading(false)  //用于手动关闭loading加载（这个组件，每次上传都默认打开loading）if(res.code==200){this.uploadFiles.push(res.data) //存入接口返回值，用于做其他操作let tempUrl={label:res.data.fileOname,value:res.data.fileUrl}this.dataForm.thumbUrl.push(tempUrl)  //用于页面渲染}})},// 上传成功钩子handleUploadSuccess(response, file, fileList) {console.log('上传成功，接口返回：', response);console.log('当前已上传文件列表：', fileList);// 可在此处理返回数据，比如更新 dataForm.thumbUrl 等},// 文件大小超出限制钩子uploadSized(file, fileList) {this.$message.error(`文件 ${file.name} 大小超过 5M 限制`);},// 文件数量超出限制钩子uploadExceed(files, fileList) {this.$message.error(`最多只能上传 3 张图片，已选择 ${files.length} 张，当前已上传 ${fileList.length} 张`);},// 上传失败钩子handleUploadError(error, file, fileList) {console.error('上传失败：', error);this.$message.error('文件上传失败，请重试');},}
}
</script>

用于记录，本人记性不大好。哈哈哈哈哈