账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    实现elementui 上传图片拖拽功能问题
    70
    0
    目前需求想要使用element ui的上传图片组件并实现拖拽，在网上找了一个方法,但是目前点击上传后，on-success方法都没有执行，求各位大佬帮看看，感谢 <div class="itemContent"> <draggable v-model="productForm.productPicList" class="list-group" tag="ul" v-bind="dragOptions" @start="productForm.drag = true" @end="productForm.drag = false" > <div v-for="(item, index) in productForm.productPicList" :key="index" v-loading="productForm.loadingapp" class="listitem" @mouseenter="showDelBtn(index)" @mouseleave="hiddenDelBtn" > <img v-if="item" :src="item" width="148" height="148" class="imgSty" /> <i v-show="index == productForm.currentDelBtn" class="el-icon-delete delIcon" @click="deleImg(item, index)" /> </div> </draggable> <div class="uploadIcon"> <el-upload :show-file-list="false" action="" list-type="picture-card" :on-success="handlePictureSuccess" > <i class="el-icon-plus" /> </el-upload> </div> </div> data() { return { productForm: { productPicList: [], currentDelBtn: -1, loadingapp: false, drag: false },}},computed: { dragOptions() { return { animation: 200, group: 'description', disabled: false, ghostClass: 'ghost' } } }, //显示删除图片的图标 showDelBtn(index) { console.log(index) this.productForm.currentDelBtn = index }, //隐藏删除图片的图标 hiddenDelBtn() { this.productForm.currentDelBtn = -1 }, // 删除图片 deleImg(data, index) { this.productForm.productPicList.splice(index, 1) }, handlePictureSuccess(response, file, fileList) { debugger console.log(file,'iodysaidsyaiodysaiodysao') const isJPG = file.raw.type === 'image/jpeg' const isJPG2 = file.raw.type === 'image/jpg' const isPNG = file.raw.type === 'image/png' const isGIF = file.raw.type === 'image/gif' const isLt5M = file.raw.size / 1024 < 100 // const isSize = this.imgSize(file) // if (!isJPG && !isJPG2 && !isPNG && !isGIF) { // this.$message.warning('只支持jpg或png或gif格式图片') // return // } // if (!isLt5M) { // this.$message.warning('商品图片须小于100K!') // return // } // if (this.productForm.productPicList.length >= 5) { // this.$message.warning(`当前限制选择 5 张图片`) // return // } //以下代码是验证是否符合比例，如果不需要验证比例可以直接把图片push到数组里 // this.productForm.productPicList.push(file.response.data) },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 王者荣耀名字男 普通会员 1楼

      在实现ElementUI上传图片拖拽功能时，我们通常会使用Vue的指令和事件处理函数来实现。以下是一个基本的实现步骤：

      1. 在Vue中，我们首先需要在HTML文件中添加ElementUI的输入元素，用于获取用户上传的图片：

      html <el-input type="file" placeholder="选择图片" v-model="file"></el-input>

      1. 在Vue的组件中，我们可以通过Vue的data属性来获取上传的图片：

      javascript data() { return { file: null } }

      1. 在Vue的模板中，我们可以使用Vue的指令和事件处理函数来实现拖拽功能。例如，我们可以使用v-on:dragstart和v-on:dragend事件来处理拖拽开始和结束的事件，以及v-on:drop事件来处理图片被拖拽到指定区域的事件：

      ```html <el-upload v-model="file" :action="uploadUrl" :on-success="handleSuccess" :on-error="handleError" : dragstart="dragStart" : dragend="dragEnd" :drop="drop"

      上传 ```

      1. 在Vue的组件中，我们可以通过data属性来获取上传的图片，并通过methods属性来实现拖拽和结束事件的处理：

      javascript methods: { dragStart(event) { // 拖拽开始的处理代码 }, dragEnd(event) { // 拖拽结束的处理代码 }, uploadUrl() { // 文件上传的URL }, handleSuccess(response) { // 图片上传成功后的处理代码 }, handleError(error) { // 图片上传失败后的处理代码 }, drop(event) { // 图片被拖拽到指定区域的处理代码 } }

      1. 在Vue的模板中，我们可以使用el-upload的data属性来获取上传的图片：

      ```html <el-upload :data="file" :action="uploadUrl" :on-success="handleSuccess" :on-error="handleError" :dragstart="dragStart" :dragend="dragEnd" :drop="drop"

      上传 ```

      以上就是实现ElementUI上传图片拖拽功能的基本步骤。具体的实现可能需要根据实际情况进行调整。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部