关于使用Element Plus的upload组件上传文件报错问题

upload组件属性

 <el-upload
             ref="exampleUploadRef"
            :file-list="fileList"//上传的文件显示列表, 格式如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
            :action="postUrl"//上传文件的路径
            :limit="1"//设置最大允许上传个数
            list-type="text"//文件列表的类型，默认是text
            accept=".doc,.docx" //接受上传的文件类型
            class="avatar-uploader"
            :before-remove="beforeRemove"//删除文件之前的钩子,若返回 false 或者返回 Promise 且被 reject，则停止删除停止执行handleRemove事件
            :before-upload="beforeUpload"//上传文件之前的钩子,进行判断文件大小和格式是否符合
            :on-remove="handleRemove"   //文件列表移除文件时的钩子
            :name="fileName"//上传的文件字段名
            :data="otherParam"//上传时附带的额外参数(如用户信息、业务标识等)
            :headers="headers"//设置上传的请求头部
            :http-request="beforeAvatarUpload"  //覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
            :on-preview="handlePreview"//点击文件列表中已上传的文件时的钩子
            :on-exceed="handleExceed" //定义超出限制时的行为(文件超出个数限制时的钩子)
            :multiple="false"//是否支持多选文件(默认是否)
            :on-success="uploadSuccess"//文件上传成功时的钩子
            :on-error="errorMessage"//文件上传失败时的钩子
            :on-change="handleChange"//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用    
          >
            <div class="uploadIcon">
              <el-icon>
                <Plus />
              </el-icon>
            </div>
            <template #tip>
              <div class="el-upload__tip text-red">只能上传doc/docx文件</div>
            </template>
          </el-upload>

// 上传前
const beforeUpload = (file) => {
   //可做上传类型 尺寸校验
	// 检测文件类型
	let isFileType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type),
		// 文件大小为20M
		isFileSize = file.size / 1024 / 1024 < 20;
	
	if (!isFileType) this.$message.error("上传头像图片只能是jpeg/png/jpg格式!");
	if (!isFileSize) this.$message.error("上传头像图片大小不能超过20MB!");
	
	return isFileType && isFileSize;

}


function beforeAvatarUpload(files) {
    let param = new FormData();
    param.append('file', files.file);
    importDeviceApi(param).then(res => {
        if (res.code == 200) {
            proxy.$modal.msgSuccess('上传数据成功');
        } else {
            proxy.$modal.msgError(res.msg);
        }
    })
}

new FormData();: 这一行创建了一个新的 FormData 对象。FormData 是一种用于创建表单数据的 JavaScript 对象，通常用于通过 AJAX 请求发送包含文件上传的表单数据。
param.append('file', files.file);: 这一行使用 append 方法将一个文件对象添加到 FormData 对象中。第一个参数是字段的名称，这里是 'file'，第二个参数是文件对象，它似乎来自 files 对象的 file 属性。

报出的问题 !!!

本来到这里都已经Ok了但是还是报错 500这里显示几条常见的错误 !!

1.上传的文件格式不是formData格式

解决方法

a. 创建一个formData对象

const formData = new formData()
 
formData.append('file', file)
 
// 然后调通接口传递相关参数

b.检查请求头部content-type类型是否为multipart/form-data

如果不是的话请修改

// 导入设备数据 /device/importData
export function importDeviceApi(data) {
    return request({
        url: "/device/importData",
        method: "post",
        data: data,
        headers: {
            'Content-Type': 'multipart/form-data',
            // 这里可以添加其他请求头，如果需要的话
        }
    })
}

2.不是以上问题，且使用的element的upload，上传的参数解析为[object]

那么就是因为

upload已经将数据转换为了formData类型，无需再次转换，直接上传获取到的数据即可

关于使用Element Plus的upload组件上传文件报错问题

报出的问题 !!!

1.上传的文件格式不是formData格式

2.不是以上问题，且使用的element的upload，上传的参数解析为[object]

猜你喜欢