### 结合
Vue.js 和 Django 部署 PyTorch 模型的解决方案
#### 路由配置与 API 接口设计
在 `urls
.py` 文件中，可以通过定义 URL 路由来将请求映射到特定的 API 视图。例如，在
Django 中可以创建一个视图类用于接收来自前端的数据并调用 PyTorch 模型进行预测[^1]。
```python
from
django.urls import path
from
.views import PredictAPIView
urlpatterns = [
path('predict/', PredictAPIView
.as_view(), name='predict_api'),
]
```
上述代码片段展示了如何设置一个名为 `predict/` 的路径，该路径会触发 `PredictAPIView` 类中的逻辑处理函数。
#### 创建
Django REST Framework 视图
为了实现前后端分离架构下的交互需求，可以在
Django REST Framework (DRF) 中构建基于类的视图以支持 POST 请求操作：
```python
from rest_framework
.views import APIView
from rest_framework
.response import Response
import torch
from torchvision
.transforms import ToTensor
from PIL import Image
from io import BytesIO
import base64
class PredictAPIView(APIView):
def post(self, request, *args, **kwargs):
image_data = request
.data
.get('image')
if not image_data:
return Response({"error": "No image provided"}, status=400)
try:
# 将 Base64 编码图像转换回二进制流
img_bytes = base64
.b64decode(image_data
.split(',')[1])
img = Image
.open(BytesIO(img_bytes))
transform = ToTensor()
tensor_img = transform(img)
.unsqueeze(0)
model = torch
.load('
./path_to_model
.pth') # 加载预训练模型
model
.eval()
with torch
.no_grad():
output = model(tensor_img)
_, predicted_class = torch
.max(output, 1)
result = {"prediction": int(predicted_class)}
return Response(result, status=200)
except Exception as e:
return Response({"error": str(e)}, status=500)
```
此部分实现了通过 HTTP POST 方法发送
图片至后端服务的功能，并利用加载好的 PyTorch 模型完成推理过程。
#### 前端
Vue.js 实现
对于前端而言，则需借助 JavaScript 或者框架如
Vue.js 来发起 AJAX 请求并将用户
上传的文件编码成适合
传输的形式（比如 Base64）。下面是一个简单的例子展示如何使用 Axios 库向刚才提到的服务端接口提交数据：
```javascript
<template>
<div id="app">
<h1>Image Prediction</h1>
<input type="file" @change="onFileChange"/>
<button v-if="selectedFile" @click="upload">Upload and Predict</button>
<p>{{ prediction }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
selectedFile: null,
prediction: ''
};
},
methods: {
onFileChange(event){
const file = event
.target
.files[0];
this
.selectedFile = file;
let reader = new FileReader();
reader
.onloadend = () => {this
.base64data = reader
.result;}
reader
.readAsDataURL(file);
},
upload(){
axios
.post('http://localhost:8000/predict/', {'image': this
.base64data})
.then(response => {
this
.prediction = response
.data
.prediction;
})
.catch(error => console
.error("There was an error!", error));
}
}
}
</script>
```
以上脚本允许使用者选择本地
图片并通过网络将其传递给远程服务器上的机器学习算法来进行分类识别任务[^2]。
#### 环境部署注意事项
考虑到实际生产环境中可能存在较多复杂的科学计算库依赖关系问题，建议采用 Docker 容器化技术或者直接将整个 Python 虚拟环境迁移到云端实例上来简化运维流程。
本文介绍如何使用Vue.js实现商品图片上传功能，并通过axios发送图片到后端服务器，利用Python处理图片并保存到数据库。
扫一扫
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
