el-upload在列表里使用

最新推荐文章于 2024-06-03 12:38:23 发布
最新推荐文章于 2024-06-03 12:38:23 发布
阅读量629 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/macangyewangs/article/details/123578563
版权

el-upload 数组得新增删除

 <el-upload
            ref="upload"
            :action="uploads.url + '?baseDir=' + uploads.baseDir"
            :headers="uploads.headers"
            :on-success="
              handleUploadSuccess2.bind(null, { index: i, data: item })
            "
            :on-change="beforeUpload2"
            :on-remove="
              handleUploadRemove2.bind(null, { index: i, data: item })
            "
            :file-list="contentlist[i].fileList"
            :limit="1"
            accept=".jpg,.jpeg,.png"
          >
            <img
              src="../../../assets/images/img2.png"
              alt=""
              class="exambs_cont5_div2_img"
            />
          </el-upload>

 handleUploadSuccess2(obj, res, file) {
      if(res.code == 200){
      this.contentlist[obj.index].fileList.push({
        name: res.data.fileName,
        url: res.data.filePath,
      });
      }else {
       this.contentlist[obj.index].fileList = [];
        this.$message({
          message: res.msg,
          type: "error",
          duration: 2000,
        });
        console.log(this.contentlist);
      }
     
    },
    handleUploadRemove2(obj, res, file) {
      this.contentlist[obj.index].fileList=[];
    },

完整代码

    <template>
  <div class="exambs">
    <div class="exambs_return">
      <img
        src="../../../assets/images/left.png"
        alt=""
        @click="getreturn"
        class="exambs_return_img"
      />
      <img src="../../../assets/images/img1.png" alt="" />
      <span>添加试题 </span>
    </div>
    <div class="exambs_cont1">
      <el-form
        :model="listForm"
        :rules="listFormRules"
        ref="listFormRef"
        label-width="100px"
      >
        <el-form-item
          label="题目类型"
          prop="questionBankType"
          class="exambs_cont1_item1"
        >
          <el-select
            @input="$forceUpdate()"
            v-model="listForm.questionBankType"
            placeholder="请选择题目类型"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="难度等级"
          prop="difficultyLevel"
          class="exambs_cont1_item1"
        >
          <el-select
            @input="$forceUpdate()"
            v-model="listForm.difficultyLevel"
            placeholder="请选择难度等级"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="归属题库"
          prop="questionBankId"
          class="exambs_cont1_item2"
        >
          <el-select
            @input="$forceUpdate()"
            v-model="listForm.questionBankId"
            placeholder="请选择归属题库"
          >
            <el-option
              v-for="item in options3"
              :key="item.questionBankId"
              :label="item.courseName"
              :value="item.questionBankId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容" prop="subjectContent">
          <el-input
            @input="$forceUpdate()"
            type="textarea"
            v-model="listForm.subjectContent"
            placeholder="请输入题目内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题图片">
          <el-upload
            ref="upload"
            :action="upload.url + '?baseDir=' + upload.baseDir"
            :headers="upload.headers"
            :on-success="handleUploadSuccess1"
            :file-list="fileList"
            :on-change="beforeUpload1"
            :on-remove="handleUploadRemove1"
            :limit="1"
            accept=".jpg,.jpeg,.png"
          >
            <el-button size="small" type="primary">
              <i class="el-icon-document-add"></i>
              上传</el-button
            >
            <div slot="tip" class="el-upload__tip" style="margin-left: 40px">
              (如果要更换试题图片，请删除已有的试题图片后在操作。)
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="整体解析">
          <el-input
            @input="$forceUpdate()"
            type="textarea"
            v-model="listForm.remark"
            placeholder="请输入整体解析"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="exambs_cont2">
      <div class="exambs_cont2_btn">
        <el-button
          type="primary"
          icon="el-icon-document-add"
          size="mini"
          @click="handleadd"
          >新增</el-button
        >
      </div>
      <!-- 答题头部 -->
      <div class="exambs_cont3">
        <span class="exambs_cont3_sp1">是否答案</span>
        <span class="exambs_cont3_sp2">选项图片</span>
        <span class="exambs_cont3_sp3">答案内容</span>
        <span class="exambs_cont3_sp4">操作</span>
      </div>
      <div class="exambs_cont4" v-show="contentlist.length == 0">暂无数据</div>
      <div class="exambs_cont5" v-for="(item, i) in contentlist" :key="i">
        <div class="exambs_cont5_div1">
          <el-checkbox v-model="contentlist[i].value">答案</el-checkbox>
        </div>
        <!-- 上传图片数组  -->
        <div class="exambs_cont5_div2">
          <el-upload
            ref="upload"
            :action="uploads.url + '?baseDir=' + uploads.baseDir"
            :headers="uploads.headers"
            :on-success="
              handleUploadSuccess2.bind(null, { index: i, data: item })
            "
            :on-change="beforeUpload2"
            :on-remove="
              handleUploadRemove2.bind(null, { index: i, data: item })
            "
            :file-list="contentlist[i].fileList"
            :limit="1"
            accept=".jpg,.jpeg,.png"
          >
            <img
              src="../../../assets/images/img2.png"
              alt=""
              class="exambs_cont5_div2_img"
            />
          </el-upload>
        </div>
        <div class="exambs_cont5_div3">
          <el-input
            @input="$forceUpdate()"
            type="textarea"
            v-model="contentlist[i].content"
            placeholder="请输入答案内容"
          ></el-input>
        </div>
        <div class="exambs_cont5_div4">
          <i class="el-icon-delete" @click="deletesb(i)"></i>
        </div>
      </div>
    </div>
    <div class="exambs_btn">
      <el-button @click="getsure">保存</el-button>
    </div>
  </div>
</template>

<script>
import { questionsadd, questionBankAll } from "@/api/exam/test";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      // 试题图片
      upload: {
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload/file",
        baseDir: "test",
      },
      // 试题图片
      uploads: {
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload/file",
        baseDir: "test",
      },
      fileList: [],
      options1: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "判断题",
          value: 3,
        },
      ],
      options2: [
        {
          label: "初级",
          value: 1,
        },
        {
          label: "中级",
          value: 2,
        },
        {
          label: "高级",
          value: 3,
        },
      ],
      options3: [],
      listForm: {
        questionBankType: "",
        difficultyLevel: "",
        questionBankId: "",
        subjectContent: "",
        remark: "",
        imgUrl: "",
        contentlist: [],
      },

      listFormRules: {
        questionBankType: [
          { required: true, message: "请选择题目类型", trigger: "blur" },
        ],
        difficultyLevel: [
          { required: true, message: "请选择难度等级", trigger: "blur" },
        ],
        questionBankId: [
          { required: true, message: "请选择归属题库", trigger: "blur" },
        ],
        subjectContent: [
          { required: true, message: "请输入题目内容", trigger: "blur" },
        ],
      },
      contentlist: [
        {
          value: false,
          content: "",
          fileList: [],
        },
      ],
    };
  },
  created() {
    this.getquestionBankAll();
  },
  methods: {
    //所有题库
    getquestionBankAll() {
      questionBankAll().then((res) => {
        this.options3 = res.data;
      });
    },
    //返回
    getreturn() {
      this.$router.push("/exam/test");
    },
    //新增
    handleadd() {
      this.contentlist.push({
        value: false,
        content: "",
        fileList: [],
      });
    },
    deletesb(i) {
      this.contentlist.splice(i, 1);
    },
    handleUploadSuccess2(obj, res, file) {
      if(res.code == 200){
      this.contentlist[obj.index].fileList.push({
        name: res.data.fileName,
        url: res.data.filePath,
      });
      }else {
       this.contentlist[obj.index].fileList = [];
        this.$message({
          message: res.msg,
          type: "error",
          duration: 2000,
        });
        console.log(this.contentlist);
      }
     
    },
    handleUploadRemove2(obj, res, file) {
      this.contentlist[obj.index].fileList=[];
    },
    handleUploadRemove1(file) {
      this.listForm.imgName = "";
      this.listForm.imgUrl = "";
    },
    // 上传成功回调
    handleUploadSuccess1(file, fileList) {
      console.log(file);
      console.log(fileList);
      if (file.code == 200) {
        this.listForm.imgName = file.data.fileName;
        this.listForm.imgUrl = file.data.filePath;
      } else {
        this.fileList = [];
        this.$message({
          message: file.msg,
          type: "error",
          duration: 2000,
        });
      }
    },
    beforeUpload1(file, fileList) {
      console.log(file);
      if (file.size / (1024 * 1024) > 500) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于500M`);
        return false;
      }
      let suffix = this.getFileType1(file.name); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg"]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix) === -1) {
        this.$message({
          message: "文件格式错误,后缀名不属于.jpg,.jpeg,.png",
          type: "error",
          duration: 2000,
        });
      }
      return suffixArray;
    },
    getFileType1(name) {
      let startIndex = name.lastIndexOf(".");
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase();
      } else {
        return "";
      }
    },
    beforeUpload2(file, fileList) {
      console.log(file);
      if (file.size / (1024 * 1024) > 500) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于500M`);
        return false;
      }

      let suffix = this.getFileType2(file.name); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg"]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix) === -1) {
        this.$message({
          message: "文件格式错误,后缀名不属于.jpg,.jpeg,.png",
          type: "error",
          duration: 2000,
        });
      }
      return suffixArray;
    },
    getFileType2(name) {
      let startIndex = name.lastIndexOf(".");
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase();
      } else {
        return "";
      }
    },
    //保存
    getsure() {
      this.listForm.contentlist = this.contentlist;
      console.log(this.contentlist);
      console.log(this.listForm);
      this.$refs["listFormRef"].validate((valid) => {
        if (valid) {
          console.log(this.listForm);
          questionsadd(this.listForm).then(response => {
            this.$modal.msgSuccess("新增成功");
           this.$router.push('/exam/test')

          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.exambs {
  padding: 18px 33px;
}
.exambs_return {
  margin-bottom: 18px;
  .exambs_return_img {
    margin-left: 5px;
    margin-right: 26px;
    cursor: pointer;
  }
  span {
    font-size: 14px;
    line-height: 18px;
    color: #333333;
    margin-left: 7px;
  }
}
.exambs_cont1 {
  background: #fff;
  padding: 36px 30px;
  border-radius: 8px;
  ::v-deep .el-form-item__label {
    font-size: 14px;
    line-height: 18px;
    color: #666666;
    font-weight: 400;
    margin-right: 36px;
  }
  ::v-deep .el-textarea {
    width: 91.5%;
  }
  ::v-deep .el-upload-list__item-name {
    padding-left: 40px;
  }
  .exambs_cont1_item1 {
    width: 32%;
    display: inline-block;
    ::v-deep .el-form-item__label {
      margin-top: 8px;
    }
    ::v-deep .el-select {
      width: 82%;
    }

    ::v-deep .el-input--medium .el-input__inner {
      border: 1px solid #c7c7cc;
    }
  }
  .exambs_cont1_item2 {
    width: 34.5%;
    display: inline-block;
    ::v-deep .el-form-item__label {
      margin-top: 8px;
    }
    ::v-deep .el-select {
      width: 74%;
    }

    ::v-deep .el-input--medium .el-input__inner {
      border: 1px solid #c7c7cc;
    }
  }
}
.exambs_cont2_btn {
  margin: 20px 0px;
}
.exambs_btn {
  margin-top: 40px;
}
.exambs_cont3 {
  span {
    display: inline-block;
    font-size: 14px;
    line-height: 40px;
    color: #5d57d1;
    height: 40px;
    background: #ebeaff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  span:nth-of-type(4) {
    border-right: 0px solid #fff;
  }
  .exambs_cont3_sp1 {
    width: 10%;
    text-align: center;
    border-radius: 8px 0px 0px 0px;
  }
  .exambs_cont3_sp2 {
    width: 20%;
    padding-left: 35px;
  }
  .exambs_cont3_sp3 {
    width: 60%;
    padding-left: 35px;
  }
  .exambs_cont3_sp4 {
    width: 10%;
    text-align: center;
    border-radius: 0px 8px 0px 0px;
  }
}
.exambs_cont4 {
  width: 100%;
  background: #fff;
  text-align: center;
  height: 100px;
  vertical-align: top;
  border-bottom: 1px solid #ebeaff;
  font-size: 20px;
  line-height: 100px;
  color: #999999;
}
.exambs_cont5 {
  .exambs_cont5_div1 {
    width: 10%;
    display: inline-block;
    background: #fff;
    height: 100px;
    vertical-align: top;
    text-align: center;
    border-right: 1px solid #ebeaff;
    border-bottom: 1px solid #ebeaff;
    .el-checkbox {
      margin-top: 40px;
    }
  }
  .exambs_cont5_div2 {
    width: 20%;
    display: inline-block;
    background: #fff;
    height: 100px;
    vertical-align: top;
    border-right: 1px solid #ebeaff;
    border-bottom: 1px solid #ebeaff;
    text-align: center;
    .exambs_cont5_div2_img {
      margin-top: 38px;
    }
    ::v-deep .el-upload-list {
      display: inline-block;
      list-style: none;
      margin-left: 12px;
      width: 79%;
    }
  }
  .exambs_cont5_div3 {
    width: 60%;
    display: inline-block;
    background: #fff;
    height: 100px;
    vertical-align: top;
    border-right: 1px solid #ebeaff;
    border-bottom: 1px solid #ebeaff;
    padding: 10px;
    ::v-deep .el-textarea__inner {
      height: 80px;
      resize: none;
    }
  }
  .exambs_cont5_div4 {
    width: 10%;
    display: inline-block;
    background: #fff;
    height: 100px;
    vertical-align: top;
    text-align: center;
    border-right: 0px solid #ebeaff;
    border-bottom: 1px solid #ebeaff;
    .el-icon-delete {
      margin-top: 34px;
      font-size: 25px;
      color: #999999;
      cursor: pointer;
    }
    .el-icon-delete:hover,
    .el-icon-delete:focus {
      color: #5d57d1;
    }
  }
}
</style>

效果图
在这里插入图片描述

施玥喵
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+el-upload 上传图片和视频小总结
weixin_42574985的博客
11-09 5071
上传图片时用到的accept只会在用户点击上传时添加一个自定义文件类型，如添加了accept=".jpg,.png,"，虽然会呈现出符合条件的文件，但用户仍可以通过点击所有文件类型来上传其他类型的文件，此时设置before-upload函数，转换格式的时候，一定要将中间的变量置空！以及在商品详情中仍需要借此转换成base64的格式，但需要先用正则表达式将所有img标签里的src获取到，其他的基本大同小异了。破解循环中的异步操作，不能直接用for循环，在我看来有效的办法方法体内的num++，再回调此函数。
使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
热门推荐
jerrica的博客
06-29 12万+
实现效果： 上传中： 上传完成： 代码： &lt;el-form-item label="视频上传" prop="Video"&gt; &lt;!-- action必选参数, 上传的地址 --&gt; &lt;el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-
elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示
小猫爪子
04-08 3万+
Upload 上传组件的使用使用el-upload组件上传文件具体参数说明，如何实现上传、下载、删除等功能获取文件列表进行file-list格式匹配代码文件展示列表自定义为表格展示使用的具体参数说明文件大小展示问题（KB/MB）文件下载代码上传文件大小与文件类型校验 使用el-upload组件上传文件 官方文档 https://element.eleme.cn/#/zh-CN/component/upload 具体参数说明，如何实现上传、下载、删除等功能 action:文件上传地址，我的项目里已经封装
Element Plus的Upload上传文件列表异步删除记录
最新发布
letosoft
06-03 215
Element Plus的Upload（el-upload）上传文件列表：异步删除请求成功后，再删除文件。
el-upload组件的文件回显功能和添加文件到elupload组件
qq_45694955的博客
02-13 7319
使用上传组件回显时候发现文件并没有加入组件。发现el-upload组件手动添加文件到组件的方法 this.$refs.name.handleStart()
vue element 手动上传视频及表单
qq_34799366的博客
05-27 914
template <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm"> <el-form-item label="名称"> <el-input v-model="ruleForm.location"></el-input> </el-form-item> <el
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
在本文中，我们详细介绍了 el-upload 的基本使用、实现上传 Excel 文件、使用 split 进行字符串截取、el-upload 的高级使用和 elemetUi 组件的其他功能。希望读者通过本文能够快速掌握 elemetUi 组件的使用。
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
<el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0"> <el-upload ref="uploadxls" class="avatar-uploader upload-img" :disabled="disabled" :auto-upload="false" ...
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。...el-upload class=upload-demo :file-list=fileList2 :action=domain :before-upload=beforeAvatarUpload :data=form :on-remo
vue结合el-upload实现腾讯云视频上传功能
11-20
后来分析到不仅要考虑上传时间的问题，更重要的是要考虑用户使用4G 网络的情况，考虑用户的流量，线上的视频，不能不做压缩转码，就放到页面上，视频不是图片，不能甩到 cdn 上就行了。 要考虑视频大小，pc 移动端...
el-upload上传图片和视频，支持预览和删除
chenlim87的博客
07-27 3673
上传附件没有使用单独的上传接口，是调用添加记录接口时，统一传参保存。添加接口请求成功后再回显。
vue element ui上传视频
weixin_45818290的博客
08-24 689
element上传组件el-upload。
ElementUI: el-upload组件上传文件/导入功能的实现,简单易懂!
qq_51930729的博客
07-08 7729
element上传/导入功能/vue导入功能实现,简单易懂!
多文件上传List＜MultipartFile＞+＜el-upload＞-带参数
xj627141903的博客
11-25 2535
多文件上传List＜MultipartFile＞+＜el-upload＞-带参数
element-plus中el-upload组件，实现上传、点击下载、删除功能等
Anony_me的博客
04-19 2万+
主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件。删除清空存放文件的数组。
vue使用 el-upload 上传文件附加参数（前后端代码）
qq_44985699的博客
11-21 2793
el-upload上传文件附加额外参数
el-upload 上传视频并回显
Aa12364567的博客
07-31 1663
el-upload上传视频，并且显示上传的视频。
vue element-ui v-for循环动态上传、删除图片
09-05 1654
示例： 代码： // =====html代码===== <el-form-item label prop> <el-upload ref="uploadImg" action="#" list-type="picture-card" :auto-upload="false" :on-remove="handleRemoveImg.bind(null,{'index':index,'data':item})" :on-exceed="
el-upload清空列表
07-12
要清空 el-upload 组件的文件列表，你可以使用 `clearFiles` 方法。你可以在需要的时候调用它来清空文件列表。以下是一个示例： ```vue <el-upload ref="upload" :action="uploadUrl" :on-remove="handleRemove">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值