精华内容
下载资源
问答
  • 主要为大家详细介绍了基于VUE选择上传图片并页面显示,图片可以删除的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 上传照片的时候,弹出这个框,然后点击按钮才能实现上传。 实现这个的话,那么必须要自定义上传,把功能暴露出来 <template> <div class="bg"> <!-- 上传 --> <el-upload ref="upload" ...

    需求:打开文件夹,弹出框(填写内容),然后点击上传按钮 再进行上传

    上传照片的时候,弹出这个框,然后点击按钮才能实现上传。
    在这里插入图片描述
    实现这个的话,那么必须要自定义上传,把功能暴露出来
    如下代码:

     <template>
      <div class="bg">
        <!-- 上传 -->
        <el-upload
          ref="upload"
          list-type="picture-card"
          :action="upload.action"
          :name="upload.fileParamsName"
          :multiple='false'
          :auto-upload='false' //是否在选取文件后立即上传
          :file-list="upload.fileList"
          :data="uploadParams"
          :on-change="changeAvatarUpload"
          :http-request="handleUpload"
          :before-upload="beforeAvatarUpload"
        >
          <i
            slot="default"
            class="el-icon-plus"
          ></i>
          //把功能暴露出来
          <div
            slot="file"
            slot-scope="{file}"
          >
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <!-- 放大 -->
              <span @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 删除 -->
              <span @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
    
        <!-- 填写跳转链接弹出框 -->
        <el-dialog
          :visible.sync="ttdialogVisible"
          :close-on-click-modal="false"
          width="30%"
          @close="dialogClosed"
        >
          <el-form
            ref="formRef"
            :model="form"
            label-width="80px"
          >
            <el-form-item prop="reLin">
              <div>跳转地址:</div>
              <el-input
                v-model="form.reLink"
                placeholder="不填,则默认地址为:www.baidu.com"
              ></el-input>
            </el-form-item>
          </el-form>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              type="primary"
              @click="getLinkData"
            >上 传 图 片</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    <script>
    import 'element-ui/lib/theme-chalk/index.css'
    import { Select, Option, Upload, Dialog, Form, FormItem, Alert, Button, Input } from 'element-ui'
    import draggable from 'vuedraggable' // 拖动插件
    
    
    export default {
      components: {
        ElSelect: Select,
        ElOption: Option,
        ElUpload: Upload,
        ElDialog: Dialog,
        ElForm: Form,
        ElFormItem: FormItem,
        ElAlert: Alert,
        ElButton: Button,
        ElInput: Input
    
      },
      data () {
        return {
          upload: {
            action: '#',
            fileList: []
          },
          dialogImageUrl: '',
          dialogVisible: false,
    
          // 跳转链接
          ttdialogVisible: false,
          form: {
            reLink: ''
          },
        }
      },
      computed: {
        // 上传时附带的额外参数
        uploadParams () {
          return {
            name: '',
            link: this.form.reLink ? this.form.reLink : 'www.baidu.com',
            type: this.select.value,
            order: 2,
            imageFile: ''
          }
        }
      },
      methods: {
        // 显示对应不同类型的图片
       ....从后台获取到文件,放在this.upload.fileList里面
       
        // 点击文件列表中已上传的文件时的钩子--用来放大图片
        async handlePictureCardPreview (file) {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        },
    
        // 文件列表移除文件时的钩子
        async handleRemove (file, fileList) {
          let de = new FormData()
          de.append('idBanner', file.banner)
          await this.$http.post('/delete', de)
         //注意:此处有个知识点,关于数组如何拿到对应值的位置,然后进行操作那个对象
          let data = this.upload.fileList
          // 获取删除元素位置
          let eleIndex = data.findIndex(value => value.banner === file.banner)
          // 删除元素
          data.splice(eleIndex, 1)
        },
    
        // 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
        changeAvatarUpload (file) {
        //选择图片之后,填写跳转连接的弹框 弹出来
          if (file.status === 'ready') {
            this.ttdialogVisible = true
          }
        },
    
        // 上传文件之前的钩子 ---给要携带的参数赋对应值
        beforeAvatarUpload (file) {
          this.uploadParams.name = file.name
          this.uploadParams.imageFile = file
          // Order排序
          if (this.upload.fileList.length > 0) {
            let fileListData = this.upload.fileList
            let maxData = fileListData[0].order
            for (let n = 1; n < fileListData.length; n++) {
              if (fileListData[n].order > maxData) {
                maxData = fileListData[n].order
              }
            }
            this.uploadParams.order = maxData + 2
          }
        },
    
        // 上传图片
        getLinkData () {
        // 让添加图片和按钮 绑定起来
          this.$refs.upload.submit()
          this.ttdialogVisible = false
        },
    
        // 监控弹框关闭事件,清除跳转链接表单信息
        dialogClosed () {
          this.$refs.formRef.resetFields()
        },
    
        // 添加图片
        async handleUpload (file) {
          const { name, link, type, order, imageFile } = this.uploadParams
          const fd = new FormData()
          fd.append('name', name)
          fd.append('link', link)
          fd.append('type', type)
          fd.append('order', order)
          fd.append('imageFile', imageFile)
          const addPic = await this.$http.post('/add', fd)
          if (addPic.data.code === 20000) {
            // 把图片真实显示出来(加入到fileList中),其实是做一个刷新,如果不是下拉选择框那种获取的形式,可以直接调用获取api的那个函数进行刷新
            this.upload.fileList.push({
              url: addPic.data.data.adImageName,
              name: addPic.data.data.adName,
              link: addPic.data.data.adLink,
              order: addPic.data.data.adOrder,
              banner: addPic.data.data.idBanner,
              type: addPic.data.data.adType
            })
          } else {
            this.numDialogVisible = true
          }
        },
        // 编辑图片信息
        handleEditload (file) {
          this.editDialogVisible = true
          this.editForm.dialogImageUrl = file.url
          this.editForm.picName = file.name
          this.editForm.picOrder = file.order
          this.editForm.picLink = file.link
          this.editForm.picType = file.type
          this.editForm.editbanner = file.banner
        },
      }
    }
    
    
    展开全文
  • [vue+iview]点击按钮上传图片

    千次阅读 2020-08-09 17:28:25
    上传图片后页面显示图片,点击预览图标进行图片预览,点击删除图标删除当前图片 <FormItem label="裁判头像" prop="refereeAvatar"> <div class="demo-upload-list" v-if="hasImage"> <!-- 图片...

    上传图片后页面显示图片,点击预览图标进行图片预览,点击删除图标删除当前图片

            <FormItem label="裁判头像" prop="refereeAvatar">
              <div class="demo-upload-list" v-if="hasImage">
                <!-- 图片显示 -->
                <img :src="newReferee.refereeAvatar" />
                <div class="demo-upload-list-cover">
                  <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                  <Icon type="ios-eye-outline" @click.native="handleView(newReferee.refereeAvatar)"></Icon>
                </div>
              </div>
              <Upload
                :action="actionUrl"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-exceeded-size="handleMaxSize"
                :on-success="handleSuccess"
                :show-upload-list="false"
                :headers="headers"
                style="width:58px;"
              >
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
              </Upload>
            </FormItem>
    
        <!-- 查看图片 -->
        <Modal title="图片预览" v-model="visible">
          <img :src="showImageUrl" v-if="visible" style="width: 100%" />
        </Modal>
    
          actionUrl: "/srs/sys/file/uploadPic",
          showImageUrl: "",
          hasImage: false,
    

    上传图片成功后后台会返回一个图片路径,拼接后页面就可以显示图片。添加图片时就可以将后台返回的图片路径再传给给后台

        handleMaxSize(file) {
          this.$Notice.warning({
            title: "图片大小限制",
            desc: "文件 " + file.name + "太大,不能超过 2M."
          });
        },
        handleView(imageUrl) {
          this.showImageUrl = imageUrl;
          this.visible = true;
        },
        handleRemove() {
          this.newReferee.refereeAvatar = "";
          this.updateReferee.refereeAvatar = "";
          this.hasImage = false;
        },
        // 添加图片成功
        handleSuccess(res, file) {
          this.newReferee.refereeAvatar =
            "http://39.98.226.151/srs/sys/" + res.data;
          // this.addAvatar = res.data;
          this.hasImage = true;
        },
            // 确认添加
        addCheck(name) {
          let result;
          let newReferee = this.newReferee;
          let avatar = this.newReferee.refereeAvatar.split(
            "http://39.98.226.151/srs/sys/"
          );
          let addAvatar = avatar[1];
          this.$refs[name].validate(async valid => {
            if (valid) {
              result = await reqAddReferee(
                addAvatar,
                newReferee.refereeIntruduction,
                newReferee.refereeName,
                newReferee.refereeTelephone,
                newReferee.refereeType
              );
              if (result.status === 200) {
                this.$Message.success("添加成功");
                this.getReferees();
                this.isAdd = false;
              } else {
                this.$Message.error(result.msg);
              }
            } else {
              this.$Message.error("添加失败");
            }
          });
        },
    
    展开全文
  • 本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <!--点击上传按钮--> !(!item.isNew&&editBtnType[index]) click=houseUpload(index)> ...
  • vue点击头像上传图片

    2020-12-10 15:52:22
    写毕设遇到个头像上传的问题要求:点击图片选择文件,并显示在头像框里 首先给图片添加点击事件 <el-avatar @click.native="upStart" :src="userDetail.upAva.url " :size="50" /> 方法如下 upStart() {...

    写毕设遇到个头像上传的问题要求:点击图片选择文件,并显示在头像框里

    在这里插入图片描述

    • 首先给图片添加点击事件
    <el-avatar @click.native="upStart" :src="userDetail.upAva.url " :size="50" />
    
    • 方法如下
    upStart() {
          //创建input
          const upload = document.createElement("input");
          //设置type为file
          upload.type = "file";
          //类型
          upload.accept = "image/png, image/jpeg";
          //添加onchange事件
          upload.onchange = this.setFile;
          //模拟点击
          upload.click();
        }
    
    • onchange方法
    setFile(e) {
          //获取文件
          const file = e.path[0].files[0];
          //将其放入formdata中方便上传
          const formData = new FormData();
          formData.append("imgFile", file);
          const ImgUrl = window.URL.createObjectURL(file);
          //构建Image对象方便获取其宽高
          const img = new Image();
          img.src = ImgUrl;
          img.onload = () => {
            //只有在图片完成加载的时候才能拿到图片的宽高
            this.userDetail.upAva.imgSize = img.width;
          };
          this.userDetail.upAva.url = ImgUrl;
        }
    

    在这里插入图片描述

    • 图片文件和图片宽高都有了,就可以将这个formdata就行上传了。
    展开全文
  • vue里应该怎么实现用按钮上传多张图片并可以在旁边进行预览啊?
  • 最后实现的效果:后端要求数据格式是json,图片...上传照片后显示,并隐藏上传按钮 html部分: <div class="upload-img-div"> <el-upload class="feedbackUpload-img" accept=".png,.jpg,.jpeg" :style="{b

    最后实现的效果:后端要求数据格式是json,图片和回复内容一起传至接口
    数据格式是json,图片不能以formData形式接后端,就考虑到将图片转为base64格式!
    在这里插入图片描述
    上传照片后显示,并隐藏上传按钮
    在这里插入图片描述
    html部分:

    <div class="upload-img-div">
                <el-upload class="feedbackUpload-img" accept=".png,.jpg,.jpeg"
                           :style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
                           action="aaa" :limit="1" :before-upload="beforeUpload" :on-change="handlePictureCardPreview"
                           :show-file-list="false" list-type="picture">
                  <i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
                  <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传照片</div>
                </el-upload>
                <i v-show="dialogImageUrl" class="el-icon-delete delUploadImg" @click="delUploadImg"></i>
              </div>
    
    • accept属性控制上传类型
    • style属性控制上传后显示图片
    • action是element要求必不可少的,后面字符随便写
    • limit限制上传数量
    • before-upload 上传前的勾子
    • on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
    • :show-file-list 是否显示已上传文件列表,这里设为false,否则会显示!
    • list-type 文件列表的类型 这里设为picture,否则会不显示上传的图片(不知道原因)

    后面几条判断是否上传,显示不同状态

    data数据:

    data() {
          return {
            dialogImageUrl: '',//上传图片后的图片地址
            uploadImgBase64: '',//存储将图片转化为base64后的字符
          };
        },
    

    js部分:
    图片转base64方法来源:图片转base64

    // 文件改变时勾子函数
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
          },
          // 上传前勾子函数
          beforeUpload(file) {
            this.toBase64(file);
            return false;//取消自动上传
          },
          handleAddFeedback() {
            let self = this;
            if (!self.addFeedbackInfo) {
              this.$message({
                message: '反馈消息不能为空',
                type: 'warning'
              });
            } else {
              let addFeedbackForm = {};
              addFeedbackForm.StudentInf = self.addFeedbackInfo;
              addFeedbackForm.StudentImg = self.uploadImgBase64;
              self.$http.post('feed_back_add', addFeedbackForm)
                .then((res) => {
                  ......
                })
                .catch(() => {
                  this.$message({
                    message: '出错了,请稍后再试',
                    type: 'error'
                  });
                });
            }
          },
          // 删除已上传图片
          delUploadImg() {
            this.dialogImageUrl = '';
            this.uploadImgBase64 = '';
          },
          // 将图片转为base64(这个方法是网上找的)
          toBase64(file) {
            const self = this;
            let reader = new FileReader();
            reader.onloadend = function () {
              self.uploadImgBase64 = reader.result;
            };
            if (file) {
              reader.readAsDataURL(file);
            }
          },
    

    style样式:

    /*上传照片样式*/
      .upload-img-div {
        width: 130px;
        height: 130px;
        position: relative;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        text-align: center;
      }
    
      .addFeedbackUpload-img {
        overflow: hidden;
        width: 130px;
        height: 130px;
      }
    
      .addFeedbackUpload-img:hover {
        border-color: #C80505;
        color: #C80505;
      }
    
      .addFeedbackUpload-img .avatar-uploader-icon {
        text-align: center;
        z-index: 100;
        font-size: 50px;
        color: #8c939d;
        width: 130px;
        line-height: 80px;
        height: 100px;
      }
    
      .addFeedbackUpload-img:hover .avatar-uploader-icon {
        color: #C80505;
      }
    
      .addFeedbackUpload-img .upload__tip {
        font-size: 12px;
        text-align: center;
        z-index: 10;
      }
    
      /*上传照片的删除*/
      .delUploadImg {
        border-radius: 50%;
        position: absolute;
        top: -10px;
        font-size: 20px;
        right: -10px;
        z-index: 999;
        color: #8c939d;
      }
    
      .delUploadImg:hover {
        color: #C80505;
      }
    

    最后请求体的数据就是这样:
    在这里插入图片描述
    本人菜鸟,有很多地方写的不好~

    展开全文
  • 隐藏该input框,同时点击按钮时,调取该input的点击上传功能。剩下的就是css优化页面了。 拖拽上传思路:通过给拖拽框dropbox绑定拖拽事件,当组件销毁时解绑事件。在拖拽结束,通过event.dataTransfer.files获取...
  • 之前做的图片上传需求是自动上传并且只带header,这次需要传参数给后台并且格式是formData,非自动上传,而是点击按钮上传,让我琢磨了半天。 需求图片如下 html代码如下 <div class="img-list"> <...
  • Vue实现点击上传图片预览图片功能

    千次阅读 2019-09-12 10:30:42
    效果 删除按钮是我自己做的 下面上源代码(如果不理解,请在下面提出问题) ... 上传图片: </div> <div style="display:flex;flex-wrap: wrap;justify-content:Center"> <...
  • vue 定制上传按钮的样式的两种方法

    万次阅读 2018-09-04 09:18:45
    accept=”image/*” 表示这个按钮打开后会默认选择图片上传 css代码 .file-upload { width : 60 px ; height : 26 px ; position : relative ; overflow : hidden ; border : 1 px ...
  • 验证上传按钮 Vuetify的Vue组件。 该组件是文件上传输入,具有Vuetify按钮的基本功能。 安装 npm i vuetify - upload - button 浏览器 包括脚本文件,然后使用Vue.use(UploadButton);安装组件Vue.use(UploadButton)...
  • 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才...
  • VUE 点击上传图片和预览大图
  • vue美化上传图片按钮

    2020-02-28 12:45:32
    默认的input file总感觉太丑了,想改样式还不能直接改 ...把div的点击事件改成input file的点击事件,再把input隐藏上就行了 <div @click="chooseFile">上传文件</div> <input class="form-btn" ref=...
  • 功能 : 替换富文本图片上传功能,由于富文本插件自动转换的的是base64,但base64 太大后台承受不住,所以需要修改点击富文本的图片按钮默认事件。 逐行解析 新手快乐文 点击富文本图标触发的代码如下 子组件内容 ...
  • <inputtype="file"ref="filElem"class="upImage"accept="image/*"@change="onFileChange"/>...上传照片</div> <divv-elseclass="haspic"@click="uppic"> <img:src="pic"/> </d...
  • Vue上传图片并实时回显

    千次阅读 2020-05-21 17:56:27
    有注释,等有时间在详细写这篇文章 <!DOCTYPE html> <... <head>...meta charset="UTF-8">...添加图片</title> <style> #upload-tip { border: 1px dashed #d9d9d9; width: 135px;
  • .upload-demo >>> .el-upload-list{ display: inline-block; transform: translateY(8px) } 结果如图显示::
  • vue 使用input file点击上传本地图片

    千次阅读 2019-02-16 12:52:00
    <input type="file" @change="upData...这里传本地图片给后台(java为例),流程是在点击完input file只后就会发送文件给后台提供的接口,会直接返回一个img路径,然后再传给对应的接口 upData(event) { var...
  • vue实现input file上传图片 显示预览图

    千次阅读 2020-08-01 10:05:38
    点击上传 export default { data() { return { isSelectFile: false, imgUrl: "" }; }, methods: { tirggerFile: function(event) { let file = event.target.files[0]; let url = ""; var reader = new FileReader...
  • vue通过upload组件实现多图片上传 先上效果图: <el-upload class="upload-demo" ref="upload" action :file-list="img.fileListOne" :auto-upload="false" list-type="picture" accept="image/*" :on-...
  • wangedit的上传图片,一个是填写图片地址,一个是本地上传,本地上传是把图片的base64编码放在了图片src中,接口参数长度在数据库都有限制的,如果图片地址用base64编码的话,随便上传几张照片长度就会超出数据库...
  • 1、实现下拉框选择参数后可点击按钮 2、文件上传 3、iframe嵌套 <template> <div> <div> <el-row :gutter="15"> <el-form ref="elForm" :model="formData" :rules="rules" size...
  • 最近Vue项目中,要将用户上传图片全部上传到oss上, ...OSS平台配置 在平台的概览里面看看自己的基础...这里是我的效果图 (当只有点击上传按钮时才会上传到OSS) 预览图片 <div class=vue-uploader> <di
  • Vue实现文件上传(带进度条和取消上传功能) 代码实现 这里我只写了单一文件上传的demo,并且只限制了文件大小不能超过5M。如果想限制上传的文件类型,可自行在input标签中进行设置,如果想要实现多个文件一起上传...
  • vue实现图片上传功能

    2020-11-27 14:28:59
    一、vue的核心插件 vuex vuex用于集中存储管理应用的所有组件的状态(state),在一个项目的开发过程中,如果一些值或者方法被多个组件频繁的使用,就把这些值或者方法定义在vuex中,便于组件的调用。 vue-router ...
  • 功能描述:点击“上传”按钮,调起本地文件夹,上传图片到页面中进行展示。由于图片过大,需要进行压缩才能入库中保存。 1.首先进行布局 HTML中 <div class="licenceBox"> <input class="licenceBtn" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,703
精华内容 1,881
关键字:

vue点击按钮上传图片

vue 订阅