vant uploader實現上傳圖片拖拽功能(設為封面)

效果圖如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="public/vant/index." rel="external nofollow" >
    <script src="public/.min."></script>
    <script src="public/vant/vant.min.js"></script>
    <script src="public/sortable/Sortable.min.js"></script>
    <script src="public/draggle/vuedraggable.umd.js"></script>

</head>
<style>
    .img_uploader{display: flex;}
    .img_upload span {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wr 
ap: wrap;}
    .img_upload_item {position: relative;margin: 0 8px 8px 0;cursor: pointer;}
    .preview-cover {position: absolute;bottom: 0;box-sizing: border-box;width: 100%;padding: 4px;color: #fff;font-size: 12px;text-align: center;background: rgba(0,0.3);}
    .van-image__error,.van-image__img,.van-image__loading {object-fit: cover;}
</style>

<body>
    <div id="app">
        <div class="img_uploader">
            <van-uploader :after-read="onRead"> </van-uploader>
            <draggable class="img_upload" v-model="fileList" :group="{name:'imgs'}" @end="end" animation="200">
                <http://www.cppcns.com 
transition-group>
                    <div class="img_upload_item" v-for="(item,index) in fileList" :key="index" @click="previewImg(fileList,index)">
                        <div class="van-image van-uploader__preview-image">
                            <img :src="item.content" alt="圖片" class="van-image__img">
                            <div class="van-uploader__preview-cover">
                                <div class="preview-cover van-ellipsis" v-if="index == 0">封面圖</div>
                            </div>
                        </div>
                        <div class="van-uploader__preview-delete" @click="delImg(index)">
                            <i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                        </div>
                    </div>
                </transition-group>
            </draggable>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",components: {
            vuedraggable: window.vuedraggable,//當前頁面註冊拖拽元件
        },data() {
            return {
                fileList: [
                    {conten 
t: 'https://img01.yzcdn.cn/vant/leaf.jpg',name: '12'},{content: 'images/banner1.png',{content: 'images/banner2.png',www.cppcns.com        {content: 'images/banner3.png',EnyPKoo          {content: 'images/banner4.png',],}
        },methods: {
            // 刪除圖片
            delImg(index) {
                if (isNaN(index) || index >= this.fileList.length) {
                    return false
                }
                let tmp = []
                for (let i = 0,len = this.fileList.length; i < len; i++) {
                    if (this.fileList[i] !== this.fileList[index]) {
                        tmp.push(this.fileList[i])
                    }
                }
                this.fileList = tmp
            },onRead(file) { // 上傳圖片到圖片伺服器
                this.fileList.push(file) 
                console.log(file)
            },// 點選預覽
            previewImg(images,index) {
                let listSrc = [];
                this.fileList.forEach(function(v,i){
                    listSrc.push(v.content)
                })
                vant.ImagePreview({
                    images:listSrc,startPosition: index,closeable:true
                });
            },// 拖拽結束後 獲取剛剛拖動的資料
            end(e) {
                var _oldIndex = e.oldIndex
                var _oldItem = this.fileList[_oldIndex]
                console.log(_oldItem);
            },}
    })
</script>

</html>

到此這篇關於vant uploader實現上傳圖片拖拽功能(設為封面)的文章就介紹到這了,更多相關vant uploader上傳圖片內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

vant uploader實現上傳圖片拖拽功能(設為封面)

vant uploader實現上傳圖片拖拽功能(設為封面)

Vant Uploader實現上傳一張或多張圖片元件

圖片上傳外掛ImgUploadJS：用HTML5 File API 實現截圖貼上上傳、拖拽上傳

vue中基於sortablejs與el-upload實現檔案上傳後拖拽排序

flask 實現上傳圖片並縮放作為頭像的例子

jquery實現上傳圖片功能

tinymce富文字編輯器如何實現上傳圖片

如何利用PHP實現上傳圖片功能詳解

axios的使用記錄以及實現上傳圖片

laravel實現上傳圖片的兩種方式小結

laravel實現上傳圖片並在頁面顯示的例子

laravel實現上傳圖片,並且製作縮圖,按照日期存放的程式碼

基於ajax實現上傳圖片程式碼示例解析

axios+.net core 實現上傳圖片

小程式實現上傳圖片

Typora+PicGo-Core(command line)+Gitee 實現上傳圖片到圖床

微信小程式實現上傳圖片的功能

原生js實現上傳圖片控制元件

vue實現上傳圖片新增水印

vue實現上傳圖片新增水印(升級版)

vant uploader實現上傳圖片拖拽功能(設為封面)

相關推薦