Element-ui中upload上传组件

关注

已于 2022-01-27 10:41:29 修改 · 627 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

vue项目利用elementui 上传视频获取视频的宽高大小等信息 1.饿了么的上传组件 <el-upload>,监听他的变化on-change <el-upload :on-change="uploadVideoChange" > <el-button size="small" type="primary"> <i class="el-icon-upload" /&... 阅读详情

            <el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
                // action 表示图片要上传到的后台API地址(要写完整路径)
              :on-preview="handlePreview"
                // on-preview 处理图片预览的事件
              :on-remove="handleRemove"
                // on-remove 处理图片删除的事件
              list-type="picture"
                // list-type 图片呈现的方式
              :headers="headerObj"
                // 图片上传组件的headers请求头对象
              :on-success="handleSuccess"
                // 监听图片上传成功的事件
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>

一.upload组件上传时需要配置对应的请求头配置，否则会导致上传失败

二.上传图片的业务逻辑

1.拼接得到一个图片信息对象

2.将图片信息对象，push到pics数组中

// 监听图片上传成功的事件
    handleSuccess(response) {
      console.log(response);
      // 1.拼接得到一个图片信息对象
      const picInfo = { pic: response.data.tmp_path };
      // 2.将图片信息对象，push到pics数组中
      this.addForm.pics.push(picInfo);
      console.log(this.addForm);
    },

三.删除图片的业务逻辑

1.获取将要删除的图片的临时路径

2.从pics数组中，找到这个图片对应的索引值

3.调用数组的splice方法把图片信息从pics数组中移除

// 处理删除图片的操作
    handleRemove(file) {
      console.log(file);
      // 1.获取将要删除的图片的临时路径
      const filePath = file.response.data.tmp_path;
      // 2.从pics数组中，找到这个图片对应的索引值
      const index = this.addForm.pics.findIndex((x) => {
        x.pic === filePath;
      });
      // 3.调用数组的splice方法 把图片信息从pics数组中移除
      this.addForm.pics.splice(index, 1);
      console.log(this.addForm);
    },

收录于