整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖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小時內與您取得聯系。
