正常访问Http接口时正常,但通过nginx访问却出现405 not allowed的提示。----nginx禁止用post访问静态资源
location / {
root /wwww/xxxx/xxx; # 静态页面根目录
index index.html; #默认首页
try_files $uri $uri /index.html; #刷新404配置
error_page 405 =200 $request_uri; #405出错配置
#如果是域名请求,出现405如下配置
#error_page 405 =200 http://$host$request_uri;
}
对于本地可以正常使用elupload,上线后报错之类的问题,基本原因就是需要action地址的问题,
两种办法-------不同的上传方式
1.action上传
本地用相对路劲,因为代理,可以正常访问,线上如果地址不处理就会使用部署地址----所以这儿我们使用绝对路劲
<template>
<el-upload class="avatar-uploader" :action="action" />
<template/>
<script setup lang="ts">
//计算属性
const action = computed(() => {
return import.meta.env.DEV ? '/api/fileUpload' : 'http://服务器域名/fileUpload'
})
<script/>
ps:最后发现其实就只需要将action的地址换成绝对路劲即可处理
<el-upload class="avatar-uploader" action="http://接口服务器域名/fileUpload" />
2.使用使用自定义上传
<el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="handleUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
----------
const handleUpload = (data: any) => {
const formData = new FormData()
formData.append('file', data.file)
// request.post('/admin/product/fileUpload', formData).then((res: any) => {
//"此处request--将axios进行了二次封装,所以请求地址,返回判断写法略有不同"
axios
.post('http://sph-api.atguigu.cn/admin/product/fileUpload', formData, {
headers: {
token: localStorage.getItem('TOKEN')
}
})
.then((res: any) => {
if (res.data.code == 200) {
imageUrl.value = res.data.data
}
})
}