这里有几个关键是
第一个是 上传用'Content-Type': 'multipart/form-data'方式向后台请求数据 'application/json'不行。这里需要单独设置一下覆盖一下通用的请求api方法
//一般通用application/json 请求api方式的写法
export const getbuttonlist = () => {
return request.get({ url: '/api/getbuttonlist'})
}
//如果是要导入 文件上传时需要重写Content-Type为 'Content-Type': 'multipart/form-data'的设置方式Authorization我就随便写一个正常时token（具体设置方式如下）
export const upload = (data) => {
const headers = {
'Content-Type': 'multipart/form-data',
'Authorization':'1'
}
return request.post({ url: '/api//upload',data,headers})
}
第二个是 把文件附加到请求参数的方式，就是
let formData = new FormData();
formData.append("file", fileList.value[0].raw);（我这里就一个文件，就这样把文件原始值应该是类似字节二进制 附件到formData）
formData.append("docId", '4314398823146323968');（这个是附件普通提交的表单信息）
vue调用及视图层 <el-uploadv-model:file-list="fileList"class="upload-demo"action="#"//这个参数咱们不用 直接赋值为#即可:http-request="uploadAction"multiple:before-remove="beforeRemove":limit="1":on-exceed="handleExceed"><el-button type="primary">导入样本</el-button></el-upload>const fileList = ref<any[]>([])const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
}// 上传请求
const uploadAction = async () => {let formData = new FormData();console.log('formData ',fileList)if( fileList.value.length>0){formData.append("file", fileList.value[0].raw);formData.append("docId", '4314398823146323968');formData.append("plateNo", '1');}const res = await upload(formData)if (res) {const { data } = resconsole.log('上传请求 上传 ', data)}
}const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(() => true,() => false)
}api层 //加载数据（其他的普通json请求方法）export const getbuttonlist = () => {return request.get({ url: '/api/getx'})}//本样例 调用的上传 api export const upload = (data) => {const headers = {'Content-Type': 'multipart/form-data','Authorization':'1'}return request.post({ url: '/api/sample/sample/upload',data,headers})}request.post 它内部是下面这样的，我们重写了他的headers，它识别你传入的参数名是headers就自动覆盖原来的headers为你设置的headers，这样就实现使用const headers = {'Content-Type': 'multipart/form-data','Authorization':'1'}了import service from './service'
import { CONTENT_TYPE,FORM_CONTENT_TYPE } from '@/constants'
import { useUserStoreWithOut } from '@/store/modules/user'const request = (option: AxiosConfig) => {const { url, method, params, data, headers, responseType } = optionconst userStore = useUserStoreWithOut()return service.request({url: url,method,params,data: data,responseType: responseType,headers: {'Content-Type': CONTENT_TYPE,[userStore.getTokenKey ?? 'Authorization']: userStore.getToken ?? '',...headers}})
}export default {post: <T = any>(option: AxiosConfig) => {return request({ method: 'post', ...option }) as Promise<IResponse<T>>},
......略}
——R)
