技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-3.路由、模型与数据库操作
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.跨域且传输数据,并优化后端接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录（一），密码的bcrypt（hash）加密与验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
mavoneditor的安装与基本使用方法https://codechina.csdn.net/mirrors/hinesboy/mavoneditor。
1.安装并引入包
安装：
npm install mavon-editor --save
全局引入：
2.使用
此时编辑器可以使用并关联数据。
3.批量上传图片
直接复制粘贴图片可以显示，但有两点问题：
（1）图片文件过大时，上传速度过慢并使接口超载。
（2）文件名相同时回覆盖之前的图片，并且重启服务器图片无法显示。
所以我们需要使用接口将图片上传到服务器。
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" v-model="model.content" />
methods方法中：
// 绑定@imgAdd event
$imgAdd(pos, file){
//判断图片格式
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif' ;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传格式必须为常用图片格式，如png,jpg,gif等');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2M');
}
if(isJPG && isLt2M){
// 缓存图片信息
this.img_file[pos] = file;
}
},
// 删除图片
$imgDel(pos){
delete this.img_file[pos];
},
图片上传与表单不要同时上传，因为后期修改文章时多数情况不会修改图片：
<el-button @click="uploadimg">统一上传图片el-button>
上传图片的方法使用formdata二进制格式：
async uploadimg(){
// 上传图片
// 第一步.将图片上传到服务器.
var that = this
var formdata = new FormData();
for(var _img in that.img_file){
formdata.append(_img, that.img_file[_img]);
}
let img_res;
img_res = await that.$http.post('upload', formdata);
console.log('res', img_res.data)
for(var img in img_res.data){
console.log('1', img_res.data[img][0])
console.log('2', img_res.data[img][1])
// img2Url方法是mavoneditor批量上传图片的方法，
// 第一个值为图片序号，第二个为文件名
// 对应后端接口，所以后端接口需要返回此格式的对应多维数组
that.$refs.md.$img2Url(img_res.data[img][0], img_res.data[img][1]);
this.$message({
type: "success",
message: "保存图片成功",
});
}
},
编写上传图片接口：
（1）定义路由
（2）编辑接口
public function upload()
{
// 获取表单上传文件
$files = request() -> file();
// return $files;
$savename = [];
foreach($files as $index => $file){
// 默认上传方法
// $savename[] = \think\facade\Filesystem::putFile( 'topic', $file);
$savename[$index][0] = $index;
// 我们上传的图片是需要显示在页面中的，
// 所以放在public中
$savename[$index][1] = 'http://127.0.0.1:3000/storage/'.\think\facade\Filesystem::disk('public')->putFile( 'topic', $file);
// 默认生成的路径中有\\，将其改为/
$savename[$index][1] = str_replace("\\", "/", $savename[$index][1]);
}
return $savename;
}
此时页面：
上传图片测试：
显示上传图片成功后，图片就可以永远显示在页面了。
到此图片上传完成。
最后上一下所有代码，大家卡住的地方可以查错：
NewsSet.vue：
<template>
<div>
<h1>{
{
id ? "编辑" : "创建" }}新闻</h1>
<el-form
label-width="80px"
style="margin-top: 20px"
@submit.native.prevent="save"
>
<el-form-item label="上级分类">
<el-select v-model="model.parent_" multiple>
<!-- 使用select获取分类名name和该分类的id,后期如果修改分类名自动更新子分类的上级分类 -->
<!-- 其中label获取分类名，发送到数据库的值为该分类的id————以id为分类寻找依据 -->
<el-option
v-for="item in parentOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="文章题目">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item label="正文内容">
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" v-model="model.content" />
</el-form-item>
<el-form-item>
<el-button @click="uploadimg">统一上传图片</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
id: {
},
},
data() {
return {
model: {
parent: [],
},
parentOptions: [],
img_file: {
}
};
},
methods: {
async uploadimg(){
// 上传图片
// 第一步.将图片上传到服务器.
var that = this
var formdata = new FormData();
for(var _img in that.img_file){
formdata.append(_img, that.img_file[_img]);
}
let img_res;
img_res = await that.$http.post('upload', formdata);
console.log('res', img_res.data)
for(var img in img_res.data){
console.log('1', img_res.data[img][0])
console.log('2', img_res.data[img][1])
that.$refs.md.$img2Url(img_res.data[img][0], img_res.data[img][1]);
this.$message({
type: "success",
message: "保存图片成功",
});
}
},
async save() {
// 上传其他数据
let res;
if (this.id) {
res = await this.$http.put("rest/news/" + this.id, this.model);
} else {
res = await this.$http.post("rest/news", this.model);
}
console.log("en?", res);
this.$router.push("/news/list");
this.$message({
type: "success",
message: "保存成功",
});
},
async fetch() {
const res = await this.$http.get("rest/news/" + this.id);
this.model = res.data;
},
async fetchParentOptions() {
const res = await this.$http.get("rest/category");
this.parentOptions = res.data;
},
// 绑定@imgAdd event
$imgAdd(pos, file){
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif' ;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传格式必须为常用图片格式，如png,jpg,gif等');
}
if (!isLt2M) {
this.$message.error('上传图标图片大小不能超过 2M');
}
if(isJPG && isLt2M){
// 缓存图片信息
this.img_file[pos] = file;
console.log(this.img_file)
}
},
$imgDel(pos){
delete this.img_file[pos];
},
},
created() {
this.id && this.fetch();
this.fetchParentOptions();
},
};
</script>
upload接口函数：
public function upload()
{
// 获取表单上传文件
$files = request() -> file();
// return $files;
$savename = [];
foreach($files as $index => $file){
// $savename[] = \think\facade\Filesystem::putFile( 'topic', $file);
$savename[$index][0] = $index;
$savename[$index][1] = 'http://127.0.0.1:3000/storage/'.\think\facade\Filesystem::disk('public')->putFile( 'topic', $file);
$savename[$index][1] = str_replace("\\", "/", $savename[$index][1]);
}
return $savename;
}
更多设计、功能的学习经验，大家也可以去我的公众号查看！
————
