bilibili发布页面主要有：发布按钮、多行文本框、一个上传图片的按钮（此处使用了vant） 【vue|VUE哔哩哔哩移动端项目使用vant 实现发布功能（上传文件）】
文章图片
组件里面的头部有：左返回按钮（使用vant）、发布按钮
需要实现功能：当文本框输入内容时 发布按钮就会高亮。
实现思路：使用computed监听文本框的变化，当文本框的内容长度>0时，就调用isHighLight函数，动态改变按钮的class名（rel-highlight），即改变了按钮的样式 。
v-model.trim=“msg” 给文本框的内容进行双向绑定 同时删除前后空格 （当输入空格时 发布按钮的事件并不会触发 不会高亮）
computed: {
isHighLight: function () {
// 判断文本框是否输入内容 有内容是true 就调用高亮函数
return this.msg.length > 0;
},
},
上传文件：此处使用了vant
文章图片
文章图片
想要实现的效果就是这样的 但是当时出现了一个问题，就是我向后端发送请求之后 图片预览不出来。 （vant官方图片之所以能预览出来，是因为它自动将图片发送到vant的服务器，所以能展示出来。）
解决方法：查找vant文件上传的官方函数有:before-read=“beforeRead” 是上传前置处理，类似于钩子函数，在图片上传到vant服务器之前，将图片/视频的地址发到后端的服务器，如果上传成功，后端把拿到图片的地址和文件类型返回过来，图片/视频就可以展示出来。
:after-read=“afterRead” ： 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象，将图片展示出来。
//当上传的文件类型为0时 就显示图片；是1时就显示视频
文章图片
调用 beforeRead函数，将文件的地址和类型传送到后端服务器 成功之后拿到返回值，显示出来：
methods: {
beforeRead(file) {
console.log("file", file);
console.log("file.type", file.type);
//判断文件的类型是否是图片
let type = file.type.indexOf("image") == -1 ? 1 : 0;
//使用FormData 的最大优点就是可以异步上传二进制文件
const forms = new FormData();
forms.append("filename", file);
// 增加文件的参数
forms.append("type", type);
// 增加类型参数 //获取返回过来的图片/视频 进行展示
axios({
url: "/bili/dynamic/uploadPicture",
method: "post",
data: forms, //URLSearchParams对象用于处理URL中查询字符串，即？之后的部分。
headers: {
"Content-Type": "multipart/form-data",
}, //php 默认要求传递请求头
})
.then((res) => {
console.log("返回res.data", res.data);
// if (res.data.data.code == "0") {
// if(res.data.code == 0){
console.log("上传成功", res.data.msg);
let imgInfo = {
Mysrc: res.data.url,
type: res.data.type,
};
this.fileMe.push(imgInfo);
//fileMe是在data里定义的 是个空的数组 存的是上传图片的地址和类型
console.log("this.imgUrl", this.imgUrl);
})
.catch((e) => {
console.log("服务器出错", e);
});
},
点击发布按钮之后 将文本和图片/视频上传到后端服务器
// 点击发布按钮
regSave() {
console.log("this.fileMe", this.fileMe);
// 通过FormData将文件转成二进制数据
const forms = new FormData();
forms.append("uid", sessionStorage.getItem("uid"));
//uid
forms.append("urlList", [this.fileMe[0].Mysrc]);
// 添加 键和值
forms.append("descr", this.msg);
// 获取上传图片描述
// forms.append("date", this.fileDate);
// 获取上传图片上传时间
forms.append("type", this.fileMe[0].type);
// 获取上传图片类型
axios({
url: "/bili/dynamic/addDynamic",
method: "post",
data: forms, //URLSearchParams类型
headers: {
"Content-Type": "multipart/form-data",
}, //php 默认要求传递请求头
})
.then((res) => {
// if (res.data.status === 200) {
console.log(res.data);
})
.catch((e) => {
console.log("服务器出错了", e);
});
setTimeout(() => {
// 发布成功 跳转到动态页面
this.$router.push('/Move/Space/SpaceMy');
}, 2000);
},
全部代码：
新人福利，分享视频领限定头像框、个性装扮
文章图片
推荐阅读
- 公司的开发需求|点击《el-table》让选中的行变色，亲测实用
- 爬虫|一些值得练习的github项目
- Leetcode283移动零(双指针解法)
- css|40个适合初学者练习HTML和CSS的案例
- java|前端小游戏飞机大战源码完整版
- javascript|第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-6 子弹发射
- ES6+|七（以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 文档对象）
- 视频教程|Web 前端视频资源分享（Bootstrap/Vue/小程序）
- java|Java五年，已财富自由，美人在手！