gree_leran/pages/uploadVideo/uploadVideo.vue

<template>
  <view class="publish-container">
	  <view class="publish-container-box">
	  	<up-upload
	  	  :fileList="fileList1"
	  	  @afterRead="afterRead"
	  	  @delete="deletePic"
	  	  name="1"
	  	  multiple
	  	  :maxCount="1"
	  	  :previewFullImage="true"
	  	  width="400rpx"
	  	  height="300rpx"
		  accept="video"
	  	></up-upload>
	  </view>
    <!-- 输入区域 -->
    <view class="input-container">
      <input v-model="state.title" class="input-title" placeholder="标题" />
      <!-- <input v-model="state.description" class="input-description" placeholder="描述" /> -->
      <textarea v-model="state.content" class="input-content" placeholder="内容"></textarea>
    </view>

    <!-- 发布按钮 -->
    <view class="publish-button" @click="publish">发表</view>
  </view>
  <up-notify ref="uNotifyRef" message="Hi uview-plus"></up-notify>
</template>

<script setup>
import { reactive,ref } from 'vue';
// import { notify } from 'uview-ui';
import {uploadFile} from '@/utils/http.js'
import{saveVideosInfo} from '@/apis/videos.js'
const fileList1 = reactive([]);
const uNotifyRef = ref(null); 
// 删除图片
const deletePic = (event) => {
  fileList1.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  let lists = [].concat(event.file);
  for (let item of lists) {
    fileList1.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
    console.log("开始上传");
    try {
		console.log(item)
      let res = await uploadFile(item.url); // 调用上传文件的方法
	  res=JSON.parse(res);
      console.log("上传图片结果", res);
      // 上传成功后更新 fileList1 中的状态和 URL
      fileList1[fileList1.length - 1].status = 'done';
      // fileList1[fileList1.length - 1].url = URL.createObjectURL(item.file);
	  fileList1[fileList1.length - 1].url = res.url;
	  state.imageUrl=res.url;
    } catch (error) {
      console.error("上传图片失败", error);
      // 上传失败时处理
      fileList1[fileList1.length - 1].status = 'failed';
      fileList1[fileList1.length - 1].message = '上传失败';
    }
  }
};
// 初始化数据
const state = reactive({
  title: '',
  description: '',
  content: '',
  imageUrl:'',
});

// 发表方法
const publish = async() => {
  // 收集需要上传的信息和图片 URL
  const data = {
    title: state.title,
    description: state.description,
    // content: state.content,
    videoUrl:state.imageUrl,
  };
  
  console.log('发布内容：', data);
  let res=await saveVideosInfo(data)
  if(res.code==200){
	   uNotifyRef.value.show({  
	          top: 10,  
	          type: 'error',  
	          color: '#000',  
	          bgColor: '#e8e8e8',  
	          message: 'Hi uview-plus',  
	          duration: 1000 * 3,  
	          fontSize: 20,  
	          safeAreaInsetTop: true  
	      });  
  }
  // 清空表单
  resetForm();
};

// 清空表单
const resetForm = () => {
  fileList1.splice(0, fileList1.length);
  state.title = '';
  state.description = '';
  state.content = '';
};
</script>

<style scoped>
.publish-container {
  padding: 20px;
}

.input-container {
  margin-top: 20px;
}

.input-title,
.input-description {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

.input-content {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  min-height: 100px;
}

.publish-button {
  background-color: #007bff;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px;
  cursor: pointer;
}

.publish-button:hover {
  background-color: #0056b3;
}
.publish-container-box{
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>