代码示例

<template>
  <scroll-view class="org-container" scroll-y enhanced :show-scrollbar="false">
    <view class="com-container">

      <!-- 自定义导航 -->
      <up-navbar :placeholder="true" :autoBack="true" title="课程表"></up-navbar>

      <!-- 主要内容 -->
      <view class="" style="color: #777;margin-top: 36rpx;text-align: center;">

      </view>

      <image src="https://xs-face.oss-cn-shanghai.aliyuncs.com/202507/1950904723374788609_875364.jpg" mode="aspectFill"
        style="width: 100%;height: 700rpx;"></image>

      <view class="btn" v-if="identity == 1">
        <up-button type="primary" size="small" text="上传课程表" @click="chooseImage"></up-button>
      </view>

    </view>

  </scroll-view>
</template>

<script setup>
  import {
    ref,
    reactive,
    getCurrentInstance
  } from 'vue';

  import {
    onShow,
    onLoad,

  } from '@dcloudio/uni-app'

  import httpUtil from '../../common/httpUtil.js'

  const {
    proxy
  } = getCurrentInstance()

  let identity = uni.getStorageSync('identity')

  function chooseImage() {
    uni.chooseImage({
      count: 1, // 最多可以选择的图片张数
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
      success: (res) => {
        let url = res.tempFilePaths[0]
        console.log(url);
        uploadImage(url)
      },
      fail: (err) => {
        console.error('选择图片失败', err);
      }
    });
  }

  function uploadImage(url) {
    uni.showLoading({
      title: '上传中...'
    });
    // 使用 uni.uploadFile 上传图片
    uni.uploadFile({
      // url: 'https://xishangkeji.com/schoolapifront/file/upload', // 你的服务器接口地址
      url: 'http://localhost:8997/file/upload', // 你的服务器接口地址
      filePath: url,
      name: 'file', // 后端接收文件的字段名
      header: {
        'Content-Type': 'multipart/form-data',
        // 如果有需要，可以添加 token 等信息
        'token': uni.getStorageSync('token')
      },
      formData: {},
      success: (uploadRes) => {
        uni.hideLoading();
        if (uploadRes.statusCode === 200) {
          const data = JSON.parse(uploadRes.data);
          // uni.showToast({
          //   title: '上传成功',
          //   icon: 'success'
          // });
          console.log('上传成功', data);
          // 处理成功后的逻辑，比如保存图片 URL
          if (data.code == 200) {
            dealUpload(data.data)
          }

        } else {
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        uni.hideLoading();
        uni.showToast({
          title: '上传失败',
          icon: 'none'
        });
        console.error('上传失败', err);
      }
    });
  }

  function dealUpload(url) {
    httpUtil('/tbTimetable/add', 'POST', {
      "classId": uni.getStorageSync('classId'),
      "img": url,
    }, (res) => {
      console.log(res);
      if (res.code == 200) {
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      }
    })
  }
</script>

<style lang="scss">
  .btn {
    margin-top: 28rpx;
  }
</style>