ivew Upload 上傳圖片組件

1. 先展示一個效果圖

2.代碼詳解

<!-- 封面縮略圖 -->
     <div class="pop-up-div pic">
        <div class="thumbnail"><span>發布封面</span></div>
        <div class="demo-upload-list" v-for="item in uploadList" :key="item.index">    // uploadList(重點）
        <template >
            <img :src="coverLink ? coverLink : item.path">    //圖片渲染
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>   // 展示默認icon
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
        </template>
       </div>
       <Upload
            ref="upload"     // dom節點
            :show-upload-list= true     // 默認上傳顯示列表
            :on-success="handleSuccess"   // 成功回調 
            :format="['jpg','png']"       // 設置圖片格式 
            :max-size="2048"              // 設置圖片大小
            :on-format-error="handleFormatError"   // 判斷圖片格式是否正確
            :on-exceeded-size="handleMaxSize"      // 限制圖片大小 
            :before-upload="handleBeforeUpload"     // 上傳之前的鈎子函數，可以在此限制圖片的張數 
            type="drag"                            // 開啟拖拽上傳
            name="coverImage"                      // multiple,加此屬性可以多圖片上傳
            :headers= "header"                    // 設置請求頭
            v-if="show"
            :action="uploadCoverUrl"              //上傳圖片接口     
            style="display: inline-block;width:116px;">
            <div  style="width: 116px;height:116px;line-height: 116px;">
                <Icon type="ios-camera" size="30"></Icon>       // 默認icon
            </div>
          </Upload>

         //點擊為大圖
          <Modal title="View Image"  v-model="visible" :closable="false" @on-ok="$store.state.addArticle = true" @on-cancel="$store.state.addArticle = true">
            <img :src="'/' + imgName "  v-if="visible" style="width: 100%;z-index:1100;">   // closable  點擊model右上角，關閉模態框，默認為true，
          </Modal>
          <div class="warnText">    // 一些格式說明
            <p>1.格式為jpg或png</p>
            <p>2.且不能大於2M</p>
            <p>3.建議尺寸336*160</p>
          </div>
        </div>
        <div slot="footer">
          <Button type="primary" size="large" @click="ok">確定</Button>  // 信息提交按鈕
        </div>

data(){

  uploadCoverUrl：'',

  uploadList :[],

  coverLink :'',

  show:true，

  visible: false,

  header:{

    'token': sessionStorage.getItem('token')

  }

}

//封面縮略圖 圖片上傳成功后的操作
          handleSuccess(res, file){
            let _this = this; console.log(res) file.path = res.data.path file.name = _this.getNameFromLink(file.path) _this.coverLink = file.path _this.uploadList.push(file) _this.show = false; }, //判斷圖片格式對不對  handleFormatError (file) { this.$Notice.warning({ title: '圖片格式不正確', desc: file.name + ' 格式不正確，請重新選擇' }); }, //限制圖片大小  handleMaxSize (file) { this.$Notice.warning({ title: '圖片尺寸過大', desc: file.name + ' 太大，最大為2M，請注意圖片大小！' }); }, //限制圖片的張數  handleBeforeUpload (file) { if(this.uploadList){ const check = this.uploadList.length < 1; if (!check) { this.$Notice.warning({ title: '最多上傳一張圖片！' }); } return check; } }, // 點擊看大圖  handleView(name){ console.log(name) this.imgName = name; this.visible = true; this.$store.state.addArticle = false }, // 刪除一張圖片  handleRemove(file){ this.uploadList.splice(file, 1); this.show = true; //這個是顯示上傳的那個icon },

//上傳pdf文件

<Upload
  ref="previewPdf"
  :default-file-list="defaultList"
  multiple
  name="accessory"
  :format="['pdf', '', '',]"
  type="drag"
  :headers= "header"
  :max-size="51200"
  :before-upload="handleBeforeUploadp"
  :on-preview="lookPdf"
  :on-success="handleSuccessPdf"
  :action="uploadPdfUrl">
  <div style="padding: 20px 0">
    <Icon type="ios-cloud-upload" size="52" style="color: #999"></Icon>
    <p>將文件拖拽至此或選擇文件(最多上傳50M的pdf文件)</p>
    <p style="color: #07C5A3;font-weight: bold">點擊上傳</p>
  </div>
</Upload>

// 點擊查看pdf的操作
  lookPdf(file){
    console.log(file)
    let _this = this;
    let url;
    if(file.response){
     url = file.response.data.path
    }else{
     url = file.url
    }
    window.open(url)
  },
  // pdf上傳成功的操作
  handleSuccessPdf(res,file,fileList){
    let _this = this;
    console.log(fileList)
    _this.$refs.previewPdf.fileList = fileList
    _this.defaultList = fileList
    _this.contentAccessoryIds = res.data.id
  },
// pdf文件移除時候的方法
handleRemoveFile(file,fileList){
  console.log(fileList)
  console.log(this.defaultList.length)
  this.defaultList = fileList
  console.log(this.defaultList)
},
// 上傳pdf文件的數量控制
handleBeforeUploadp(){
  let _this = this;
  console.log(_this.defaultList)
  const tpl = _this.defaultList.length < 1
  if(!tpl) {
    _this.$Notice.warning({
            title: '最多上傳一個pdf文件！'
        });
  }
  return tpl;
},

// 通過iframe上傳視頻

<!--視頻-->
<div v-if="shiPing" class="shi-ping">
  <!-- 視頻 -->
   <iframe v-if="!videoSrc" width="800" height="200" src="" frameborder="0"></iframe>
  <div >
    <div v-if="videoSrc" class="deleteFlag"><span class="float-r" @click="deleteVideo" style="backgroundColor:#333;cursor:pointer;width:32px;text-align:center;font-size:24px;">X</span> </div>
    <video id="videoSec" v-if="videoSrc" :src="videoSrc"  width="300" height="200" controlsList="nodownload"  controls="controls"></video>
  </div>
</div>