vue - element admin 公用上传

处理多个图片

<el-form-item label="浮窗广告">
                        <div class="pic-upload mini-upload" style="margin-top:0px">
                            <el-upload action="/...." accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG" ref="uploadFileFloat" style="width: 80px; height: 80px;" list-type="picture-card" name="upfile" :data="{type:'image'}" :before-upload="beforeUpload" :file-list="editform.floatFile" :on-success="uploadFile.bind(null, {'name':'xcx_adv_float'})">
                                <i slot="default" class="el-icon-plus" ref="uploadFloat"></i>
                                <div slot="file">
                                    <img class="el-upload-list__item-thumbnail" :src="xcx_adv_float.pic_url" alt />
                                    <span class="el-upload-list__item-actions">
                                        <span class="el-upload-list__item-preview" @click="handlePreview(xcx_adv_float.pic_url)">
                                            <i class="el-icon-zoom-in scale-icon"></i>
                                        </span>
                                        <span class="el-upload-list__item-delete" @click="removeFile({'name':'xcx_adv_float','ref':'uploadFileFloat'})">
                                            <i class="el-icon-delete scale-icon"></i>
                                        </span>
                                        <div class="upload-list__item-change" @click="replaceFile({'name':'xcx_adv_float','ref':'uploadFloat'})">点击替换</div>
                                    </span>
                                </div>
                            </el-upload>
                        </div>
                        <div class="more-tip">Tip:100×100px</div>
                    </el-form-item>

  //多个上传前
        beforeUpload(file) {
            const isSize = file.size / 1024 / 1024 < 2;
            if (!isSize) {
                this.$message.error('上传图片大小不能超过2MB');
            }
            return isSize;
        },
        //多个成功上传文件
        uploadFile(data, res, file) {
            this.editform[data.name].pic = res.path;
            this.editform[data.name].pic_url = res.url;
        },
        //展示图片
        handlePreview(url) {
            this.dialogImageUrl = '';
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
        //多个删除图片
        removeFile(data) {
            this.editform[data.name].pic = '';
            this.editform[data.name].pic_url = '';
            this.$refs[data.ref].clearFiles();
        },
        //多个替换图片，触发input
        replaceFile(data) {
            this.$refs[data.ref].click();
        },

标签：vue,name,admin,上传,pic,element,url,data,editform
来源： https://www.cnblogs.com/gggggggxin/p/13846125.html