Ant design for vue 如何使用圖片上傳Upload組件


使用圖片上傳組件:

show-upload-list:是否展示上傳的文件

custom-request:自定義上傳方法

 <a-upload
  list-type="picture-card"
  :custom-request="customRequest"
  :support-server-render="supportServerRender"
  :show-upload-list="false"
 >
  <div v-if="fileList.length < 3">
      <a-icon type="plus" />
       <div class="ant-upload-text">
         上傳
       </div>
    </div>
</a-upload>

定義上傳實現:

 customRequest(file) {
        this.supportServerRender = true;
        uploadPicture(file).then(res=>{
           this.supportServerRender = false;
            if(res.success){
                this.fileList.push({url:res.data});
                this.$message.success("上傳成功!");
            }else{
                this.$message.error("上傳失敗!");
            }
        });
    },
    delImg(index){
        this.fileList.splice(index,1);
    },

自定義展示樣式:

<a-col v-for="(item,index) in fileList" :key="index">
  <img :src="item.url" style="width:80%;height:260px;margin-bottom:10px;">
  <a-icon type="delete" class="delete" title="點擊刪除" @click="delImg(index)"/>
</a-col>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM