vue中单个页面设置多个上传组件

张不大了

已于 2024-01-24 11:22:40 修改

阅读量708

点赞数 11

分类专栏： vue 文章标签： vue.js 前端

于 2024-01-24 11:20:40 首次发布

本文链接：https://blog.csdn.net/weixin_46054156/article/details/135593090

版权

vue 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

文章描述了作者在项目中如何通过Element-UI的上传组件解决单页面多个图片上传的问题，通过判断`file.data`中的名称参数，实现对不同图片的单独处理并上传到服务器。

摘要由CSDN通过智能技术生成

简述：

在最近的项目中，遇到单页面有多个上传图片的地方，如果每一个上传组件都写一个上传事件，在编码过程中又繁琐，后期维护也麻烦，最终在element-ui中找到了解决方法，在此记录一下。

html代码

<el-form-item label="背景图：">
     <el-upload
         class="avatar-uploader"
         action=""
         :show-file-list="false"
         list-type="picture"
         :http-request="Upload"
         :data="{name:'background_ImgUrl'}"
         :on-error="handleFailure"
         :before-upload="beforeAvatarUpload"
      >
         <div class="imgorigin" v-if="!form.background_ImgUrl">
             <i class="el-icon-plus first"></i>
             <span class="second"> 上传 </span>
         </div>
         <img
             v-if="form.background_ImgUrl"
             :src="form.background_ImgUrl"
             alt
             class="img avatar-uploader-icon"
          />

     </el-upload>
     <span class="logo">建议尺寸：1920*400</span>
</el-form-item>
<el-form-item label="头像：">
     <el-upload
         class="avatar-uploader"
         action=""
         :show-file-list="false"
         list-type="picture"
         :http-request="Upload"
         :data="{name:'avator_ImgUrl'}"
         :on-error="handleFailure"
         :before-upload="beforeAvatarUpload"
      >
         <div class="imgorigin" v-if="!form.background_ImgUrl">
             <i class="el-icon-plus first"></i>
             <span class="second"> 上传 </span>
         </div>
         <img
             v-if="form.background_ImgUrl"
             :src="form.background_ImgUrl"
             alt
             class="img avatar-uploader-icon"
          />

     </el-upload>
     <span class="logo">建议尺寸：1920*400</span>
</el-form-item>

图片上传，调用上传接口

注意：此处的file.data接收的参数，便是上面上传组件中定义的信息；通过拿到file.data中的数据，来判断是哪个上传弹框上传的数据，最后再根据业务需求，赋值给不同的变量

/**logo图片上传成功 */
  Upload(file) {
    console.log(file)
    var fileName = file.file.name;
    var formname = file.data.name;
    console.log('forname',formname)
    // 此处直接上传到阿里云
    上传接口.upload(file.file,fileName, (res) => {
      if (res.res.statusCode == "200") {
          switch(formname){
            case 'background_ImgUrl' :
              this.form.background_ImgUrl = 返回的图片路径
              break
            case 'avator_ImgUrl1':
              this.form.avatorValue_ImgUrl = 返回的图片路径
              break
          }
        this.$message({
          message: "上传成功！",
          type: "success",
        });
      } else {
        this.$message.warning("上传图片失败!");
      }
    });
  }