Merge pull request #964 from xinnan-tech/update-fix

fix:取消docker版上传ota固件时默认的文件大小限制

Author: xinnan-tech

Dockerfile-web

@@ -23,7 +23,7 @@ RUN apt-get update && \
     rm -rf /var/lib/apt/lists/*
 
 # 配置Nginx
-COPY docs/docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY docs/docker/nginx.conf /etc/nginx/nginx.conf
 
 # 复制前端构建产物
 COPY --from=web-builder /app/dist /usr/share/nginx/html

README.md

@@ -6,7 +6,7 @@
 <p align="center">
 本项目为开源智能硬件项目
 <a href="https://github.com/78/xiaozhi-esp32">xiaozhi-esp32</a>提供后端服务<br/>
-根据<a href="https://ccnphfhqs21z.feishu.cn/wiki/M0XiwldO9iJwHikpXD5cEx71nKh">小智通信协议</a>使用Python实现<br/>
+根据<a href="https://ccnphfhqs21z.feishu.cn/wiki/M0XiwldO9iJwHikpXD5cEx71nKh">小智通信协议</a>使用Python、Java、Vue实现<br/>
 帮助您快速搭建小智服务器
 </p>
 
@@ -15,7 +15,8 @@
 · 简体中文
 · <a href="https://github.com/xinnan-tech/xiaozhi-esp32-server/releases">更新日志</a>
 · <a href="./README.md#%E9%83%A8%E7%BD%B2%E6%96%87%E6%A1%A3">部署文档</a>
-· <a href="https://github.com/xinnan-tech/xiaozhi-esp32-server/issues ">反馈问题</a>
+· <a href="https://github.com/xinnan-tech/xiaozhi-esp32-server/issues">反馈问题</a>
+· <a href="./docs/FAQ.md">常见问题</a>
 </p>
 <p align="center">
   <a href="https://github.com/xinnan-tech/xiaozhi-esp32-server/releases">

docs/docker/nginx.conf

@@ -1,26 +1,53 @@
-server {
-    listen 8002;
-    server_name localhost;
-
-    # 静态资源服务（Vue项目）
-    location / {
-        root /usr/share/nginx/html;
-        try_files $uri $uri/ /index.html;
-    }
+user  root;
+worker_processes  4;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  300;
+    client_header_timeout 180s;
+    client_body_timeout 180s;
+    client_max_body_size 1024M;
+
+    gzip on;
+    gzip_buffers 32 4K;
+    gzip_comp_level 6;
+    gzip_min_length 100;
+    gzip_types application/javascript text/css text/xml image/jpeg image/gif image/png;
+    gzip_disable "MSIE [1-6]\.";
+    gzip_vary on;
+
+    server {
+        # 无域名访问，就用localhost
+        server_name localhost;
+        # 80端口
+        listen  8002;
+
+        # 转发到编译后到web目录
+        location / {
+			root /usr/share/nginx/html;
+			try_files $uri $uri/ /index.html;
+		}
 
-    # API反向代理（Java项目）
-    location /xiaozhi/ {
-        proxy_pass http://127.0.0.1:8003;
-        proxy_set_header   Host   $host;
-        proxy_cookie_path /api/ /;
-        proxy_set_header   Referer $http_referer;
-        proxy_set_header   Cookie $http_cookie;
+        # 转发到manager-api
+        location /xiaozhi/ {
+            proxy_pass http://127.0.0.1:8003;
+            proxy_set_header   Host   $host;
+            proxy_cookie_path /manager/ /;
+            proxy_set_header   Referer $http_referer;
+            proxy_set_header   Cookie $http_cookie;
 
-        proxy_connect_timeout 10;
-        proxy_send_timeout 10;
-        proxy_read_timeout 10;
+            proxy_connect_timeout 10;
+            proxy_send_timeout 10;
+            proxy_read_timeout 10;
 
-        proxy_set_header   X-Real-IP  $remote_addr;
-        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header   X-Real-IP  $remote_addr;
+            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
     }
 }

main/manager-web/src/components/FirmwareDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose">
+  <el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose" @open="handleOpen">
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form-item label="固件名称" prop="firmwareName">
         <el-input v-model="form.firmwareName" placeholder="请输入固件名称(板子+版本号)"></el-input>
@@ -13,11 +13,14 @@
         <el-input v-model="form.version" placeholder="请输入版本号(x.x.x格式)"></el-input>
       </el-form-item>
       <el-form-item label="固件文件" prop="firmwarePath">
-        <el-upload class="upload-demo" action="#" :http-request="handleUpload" :before-upload="beforeUpload"
-          :accept="'.bin,.apk'" :limit="1" :multiple="false" :auto-upload="true">
+        <el-upload ref="upload" class="upload-demo" action="#" :http-request="handleUpload"
+          :before-upload="beforeUpload" :accept="'.bin,.apk'" :limit="1" :multiple="false" :auto-upload="true"
+          :on-remove="handleRemove">
           <el-button size="small" type="primary">点击上传</el-button>
           <div slot="tip" class="el-upload__tip">只能上传固件文件(.bin/.apk)，且不超过100MB</div>
         </el-upload>
+        <el-progress v-if="isUploading || uploadStatus === 'success'" :percentage="uploadProgress"
+          :status="uploadStatus"></el-progress>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息"></el-input>
@@ -53,6 +56,9 @@ export default {
   data() {
     return {
       firmwareTypes: FIRMWARE_TYPES,
+      uploadProgress: 0,
+      uploadStatus: '',
+      isUploading: false,
       rules: {
         firmwareName: [
           { required: true, message: '请输入固件名称(板子+版本号)', trigger: 'blur' }
@@ -108,16 +114,72 @@ export default {
     },
     handleUpload(options) {
       const { file } = options
+      this.uploadProgress = 0
+      this.uploadStatus = ''
+      this.isUploading = true
+
+      // 使用setTimeout实现简单的0-50%过渡
+      const timer = setTimeout(() => {
+        if (this.uploadProgress < 50) {  // 只有当进度小于50%时才设置
+          this.uploadProgress = 50
+        }
+      }, 1000)
+
       Api.ota.uploadFirmware(file, (res) => {
+        clearTimeout(timer)  // 清除定时器
         res = res.data
         if (res.code === 0) {
           this.form.firmwarePath = res.data
           this.form.size = file.size
+          this.uploadProgress = 100
+          this.uploadStatus = 'success'
           this.$message.success('固件文件上传成功')
+          // 延迟2秒后隐藏进度条
+          setTimeout(() => {
+            this.isUploading = false
+          }, 2000)
         } else {
+          this.uploadStatus = 'exception'
           this.$message.error(res.msg || '文件上传失败')
+          this.isUploading = false
+        }
+      }, (progressEvent) => {
+        if (progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          // 只有当进度大于50%时才更新
+          if (progress > 50) {
+            this.uploadProgress = progress
+          }
+          // 如果上传完成但还没收到成功响应，保持进度条显示
+          if (progress === 100) {
+            this.uploadStatus = ''
+          }
         }
       })
+    },
+    handleRemove() {
+      this.form.firmwarePath = ''
+      this.form.size = 0
+      this.uploadProgress = 0
+      this.uploadStatus = ''
+      this.isUploading = false
+    },
+    handleOpen() {
+      // 重置上传相关状态
+      this.uploadProgress = 0
+      this.uploadStatus = ''
+      this.isUploading = false
+      // 重置表单中的文件相关字段
+      if (!this.form.id) {  // 只在新增时重置
+        this.form.firmwarePath = ''
+        this.form.size = 0
+        // 重置上传组件
+        this.$nextTick(() => {
+          if (this.$refs.upload) {
+            this.$refs.upload.clearFiles()
+          }
+        })
+      }
     }
   }
 }