语言及配置:vue、vantui、vite
报错信息
[vite] http proxy error:
Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20)
或者文章来源:https://www.toymoban.com/news/detail-773276.html
[vite] http proxy error:
Error: connect ETIMEDOUT 2606:4700:3037::6815:532d:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
解决办法
官方文档:SM.MS v2 API Docs。在官方文档中指定上传的Url是:https://sm.ms/api/v2/
,但还是无法上传成功,最后将Url改为:https://smms.app/api/v2
成功解决。文章来源地址https://www.toymoban.com/news/detail-773276.html
页面代码
<template>
<div class="upload-container">
<van-uploader
v-model="fileList"
:max-count="1"
:after-read="afterRead"
/>
<div v-if="imgUrl" class="result">
<p>上传成功,图片链接为:</p>
<a :href="imgUrl" target="_blank">{{ imgUrl }}</a>
</div>
<div v-if="errorMsg" class="error">
<p>上传失败,错误信息为:</p>
<p>{{ errorMsg }}</p>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
fileList: [],
imgUrl: "",
errorMsg: "",
};
},
methods: {
afterRead(file) {
// 创建表单数据对象
let formData = new FormData();
// 添加图片文件
formData.append("smfile", file.file);
// 发送 POST 请求到 sm.ms 的 API 地址
axios.post("/useSMMS/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
"Authorization": " ", //这里填上自己账号的ApiTocken
},
})
.then((res) => {
// 处理响应数据
if (res.data.success) {
// 如果成功,显示图片链接
this.imgUrl = res.data.data.url;
this.errorMsg = "";
} else {
// 如果失败,显示错误信息
this.imgUrl = "";
this.errorMsg = res.data.message;
}
})
.catch((err) => {
// 处理异常情况
this.imgUrl = "";
this.errorMsg = err.message;
});
},
},
};
</script>
<style scoped>
.upload-container {
margin: 20px;
}
.result {
color: green;
}
.error {
color: red;
}
</style>
在vite.config.ts解决跨域问题
module.exports = {
server: {
proxy: {
'/useSMMS': {
// target: 'https://sm.ms/api/v2',
target: 'https://smms.app/api/v2',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/useSMMS/, '') // 不可以省略rewrite
}
}
}
}
注意:不建议在前端透露ApiTocken
注意:不建议在前端透露ApiTocken
注意:不建议在前端透露ApiTocken
到了这里,关于在项目中将图片上传到SM.MS报错 [vite] http proxy error的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!