整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图1
图2
图3
如何使用Typora撰写导出HTML的文档？Typora是一个所见即所得的Markdown格式文本编辑器，支持Windows、macOS和GNU/Linux操作系统，包括对GitHub Flavored Markdown扩展格式的支持、拼写检查、自定义CSS样式、数学公式渲染（通过MathJax）等特性。使用Typora撰写文档能达到如下效果：
某某产品操作手册HTML示例
当然，使用Typora配置图片时，需将图片上传到图床并存储到码云，这样其他人才能看到的哦~~
下面即Typora配置图片自动上传到图床的步骤方法——————
详细步骤及坑点防御如下：
1.下载PicGo
1)PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具
2)安装picgo时，建议直接安装在C盘；
3）安装成功后，上传图片到SM.MS图床试一下，如果在相册中可以看到所上传的图片，证明安装picgo成功；
2.下载插件gitee
注意：安装gitee插件，必须要先安装node.js才能安装插件
这2个都可以.
3.在码云创建仓库,及token
token获取：进入码云，点击进入设置页,找到左侧 私人令牌 ，点击生成新令牌，描述随便填写，就勾选projects，提交，复制获取到的token
4.在picgo填写仓库信息
【能手动填写的最好手动填写】最后如上图填写的资料一样,owner是你的gitee用户名,repo是仓库名,注意message不写会无法保存.
5.在Typora中配置
现目标：
图1 多图上传效果
1、html代码
<tr class=''>
<td width="90" align="right">相关多图</td>
<td >
<div class='yllist yllist_x_duotu'>
<dl>
<!--存放上传的图片-->
<transition-group name="list">
<dd v-for="(item,index) in listData " draggable="true" :key="item"
@click="del(index)"
@mouseover="showzz(1,index)"
@mouseleave="showzz(0,index)"
@dragstart="drag($event,index)"
@drop="drop($event,index)"
@dragover='allowDrop($event)'
>
<img :src="item.picpath">
<div class='zzz none' :class="{'nonone':item.shs==1}">
<div class='zzimg '><i class="fa fa-trash-o" aria-hidden="true"></i></div>
</div>
</dd>
<!--结束-->
</transition-group>
<dd @click="upbtn" class='btnclass'><i class="fa fa-camera-retro" aria-hidden="true"></i>
<input type='file' id='multiple' accept="image/*" multiple="multiple" style='display:none' @change="autoup" name="ss">
</dd>
</dl>
<div class='clear'></div>
<div>
<span class='itemms'>说明：可以拖动改变顺序</span>
</div>
</div>
</td>
</tr>说明：
@click="del(index)" 点击删除图片 index为数组的索引 点击的是第几个图片
@mouseover="showzz(1,index)" 鼠标放到上边 出现遮罩层 垃圾桶
@mouseleave="showzz(0,index)" 鼠标离开 遮罩层消失
@dragstart="drag($event,index)" 以下三个 用于拖拽排序
@drop="drop($event,index)"
@dragover='allowDrop($event)'
draggable="true" 设置为true 可以拖动
:key="item" 这里的key 要注意不能等于 index，要不然没有动画效果
img src的属性 是 :src="item.picpath" 不能是src={{item.picpath}}
<div class='zzz none' :class="{'nonone':item.shs==1}"> 设置遮罩层 shs=1的时候显示
上传的选择框设置为display:none隐藏
transition-group用法：
<transition-group name="list"> 实现拖拽的动画效果 后边的name可以随意写 ，但是要和css的.list-move {transition: transform 0.3s;} 【上边自定义的name，我这里是list】-move 设置该css 动画的时间
2、js代码
new Vue({
el: '#app',
data(){
tagslist:[
'网站开发',//存放的标签
'网站建设'
],
tagsdt:"", //绑定的标签文本框
tagindex:"",//删除标签的序号（索引）
listData: [
/*
{'picpath':'/public/upload/image/20211107/1.jpg',shs:0}
shs 显示遮罩层 ，垃圾桶删除标志，0 不显示 1显示
*/
],
file:"file", //用于切换 file text 实现同一个图片可以连续上传
tis:'', //提示内容
showzzc:0, //弹出框的显示，隐藏 。0 隐藏 1显示
showts:0, //1 弹出提示操作框 2 弹出提示确认框
lisindex:"", //记录图片的索引
datameth:"" //根据这里的参数操作不同的方法
}
},
methods:{
tags:function(){
if(this.tagsdt){
this.tagslist.push(this.tagsdt);
}
this.tagsdt="";
},
deltag:function(f){
this.showzzc=1;
this.showts=1;
this.tagindex=f;
this.datameth='tag';
},
hidetc:function(){
this.showzzc=0;
},
del:function(key){
this.showzzc=1;
this.showts=1;
this.lisindex=key;
this.datameth="delpic";
//this.listData.splice(key, 1);
},
isdelc:function(){
if(this.datameth=="delpic"){
this.listData.splice(this.lisindex, 1);
}
if(this.datameth=="tag"){
this.tagslist.splice(this.tagindex, 1);
}
this.showzzc=0;
},
showzz:function(meth,key){
//console.log(this.listData[key].shs);
if(!this.listData[key].shs){
this.$set(this.listData[key],'shs',0);
}
this.listData[key].shs=meth;
},
upbtn:function(){
document.getElementById("multiple").click();
},
autoup:function(){
let that=this;
that.file="text"; //切换text file
let ups=document.getElementById( "multiple");
let formdata = new FormData();
if(ups.files[0]){
if(ups.files.length>4){
this.showzzc=1;
this.showts=2;
this.tis="一次最多可以选择4张图片上传！";
that.file="file";
return false;
}
for(m=0;m<=ups.files.length-1;m++){
formdata.append("file", ups.files[m]);
axios.post("/api/uppic", formdata)
.then(function (response) {
if(response.data.error=='0000'){
that.listData.push(response.data.pic);
that.file="file";//重新切换为file
//console.log(JSON.stringify(that.listData));
}else{
that.showzzc=1;
that.showts=2;
that.tis=response.data.msg;
that.file="file";
return false;
}
})
.catch(function (error) {
console.log(error);
});
}
console.log(ups.outerHTML);
}
}
})注意：上传图片以后一定要that.file="file"，切换回file，不然会出现只能上传一次，下次选择当前图片不能上传的情况。
上边的上传是选取多个然后for循环逐个上传的，也可以file使用数组file[]批量提交，如下：
for(m=0;m<=ups.files.length-1;m++){
formdata.append("file[]", ups.files[m]);
}
axios.post("/api/uppic", formdata)但是这样做的话，后台使用
foreach($_FILES as $k=>$v){
}得到的$v['name']就是数组，需要我们再次for循环，得到单个的图片信息，返回以后的信息因为是数组，push只能一次追加一个，就只能再次循环，感觉很麻烦还不如开始就循环，一个一个的上传。
3、信息标签html
<tr class=''>
<td width="90" align="right">信息标签</td>
<td>
<div class="layui-input-inline tagslist" >
<span class='tagspan' v-for="(tag,key) in tagslist" :key="key" @click="deltag(key)">{{tag}}</span>
</div>
<input type="text" class='inpMain' id='tags' style='width:150px;' @blur="tags" v-model="tagsdt" /> <span class='itemms'>点击标签可以删除</span>
<span class='itemms'></span>
</td>
</tr>输入文本框绑定tagsdt，当我们鼠标离开该文本框的时候，通过blur使用tags方法读取绑定的tagsdt，可以获得输入的内容，这里需要判断是否为空，如果不为空再push进数组：this.tagslist.push(this.tagsdt);
4、php后端代码
foreach($_FILES as $k=>$v){
$v['name'],$v['size'],$v['tem_name']
就是图片的基本信息，使用move_uploaded_file移动到指定文件夹
$imags['picpath']=$path;
$imags['shs']=0;
}
exit(json_encode(array('error'=>'0000','pic'=>$imags),JSON_UNESCAPED_UNICODE));move_uploaded_file用法：
当前文件：$v["tmp_name"]，
目标文件：ROOT_PATH.$images_dir.$newname
move_uploaded_file($v["tmp_name"], ROOT_PATH.$images_dir.$newname);
再次强调上传图片，要验证图片的安全性，防止图片木马！
*请认真填写需求信息，我们会在24小时内与您取得联系。
