<template> <div id="FeedbookEdit"> <textarea class="content" cols="30" rows="10" v-model="content" placeholder="撰写你的意见和想法..."></textarea> <div class="upload_box"> <van-uploader v-model="fileList" multiple :after-read="afterRead" /> </div> <div class="release_btn_box"> <van-button class="release_btn" round color="#38dfa2" type="primary" :disabled="content == ''" @click="handleRelease" >发布</van-button > </div> </div> </template> <script> import Axios from 'axios' export default { data() { return { userInfo: '', content: '', //发布的内容 fileList: [ // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }, // // Uploader 根据文件后缀来判断是否为图片文件 // // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明 // { url: 'https://cloud-image', isImage: true }, ], } }, mounted() { let userInfo = localStorage.getItem('userInfo') if (userInfo) { this.userInfo = JSON.parse(userInfo) } }, methods: { // 读取到文件后 afterRead(file) { if (Array.isArray(file)) { this.fileUpload(file, 0) } else { this.fileUpload([file], 0) } }, fileUpload(files, index) { for (let i = index; i < files.length; i++) { files[i].status = 'uploading' files[i].message = '上传中...' } let params = new FormData() params.append('file', files[index].file, files[index].file.name) let config = { headers: { //添加请求头 'Content-Type': 'multipart/form-data', }, } Axios.post('https://proxy.shunzhi.net/prod/api/file/fileUpload', params, config).then((res) => { if (res?.status == 200 && res.data.code == 200) { files[index].status = 'succeed' files[index].url = res.data.message files[index].message = '上传成功' } else { files[index].status = 'failed' files[index].message = '上传失败' } if (index + 1 < files.length) { this.fileUpload(files, index + 1) } }) }, // 发布 handleRelease() { // 计算图片 let photos = [] for (let i in this.fileList) { if (this.fileList[i].url) { photos.push(this.fileList[i].url) } } this.$toast.loading({ message: '正在发布...', duration: 0, forbidClick: true, }) this.yxAxios .post(`${this.yanxueUrl}/api/StudiesWap/AddFeedBack`, { content: this.content, userId: this.userInfo.centerNo, imgs: photos.join(','), }) .then((res) => { this.$toast.clear() console.log('发布:', res.data) if (res.data.status == 1) { this.$router.back() } else { this.$toast(res.data.message) } }) }, }, } </script> <style lang="scss"> #FeedbookEdit { min-height: 100%; box-sizing: border-box; padding-bottom: 300px; .selected_tag_box { padding: 24px; padding-bottom: 0; font-size: 26px; color: #5f94ff; height: 0; transition: 0.3s ease; &.open { height: 40px; } } .title { font-size: 32px; width: 100%; padding: 0 24px; margin: 20px 0; margin-top: 50px; box-sizing: border-box; border: none; background: transparent; } .content { font-size: 32px; width: 100%; height: 280px; padding: 0 24px; margin: 20px 0; box-sizing: border-box; border: none; background: transparent; } .upload_box { padding: 24px; .van-uploader__preview { margin: 0 27px 27px 0; &:nth-of-type(3n) { margin-right: 0; } } .van-uploader__preview-image { width: 216px; height: 216px; } .van-uploader__upload { width: 216px; height: 216px; margin: 0 0 27px 0; } } .tag_box { padding: 24px; .tag_item { display: inline-block; color: #999; padding: 0 26px; line-height: 55px; border-radius: 33px; font-size: 26px; margin-right: 12px; margin-bottom: 20px; &.active { background: #5f94ff; color: #fff; } } } .van-cell { font-size: 30px; } .release_btn_box { width: 100%; height: 260px; background: #fff; position: fixed; bottom: 0; left: 0; .release_btn { width: 662px; position: absolute; bottom: 100px; left: 44px; font-size: 32px; } } } </style>