单页面设置多个上传组件

最新推荐文章于 2023-04-04 14:37:48 发布

张不大了

最新推荐文章于 2023-04-04 14:37:48 发布

阅读量486

点赞数

分类专栏： vue

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

版权

图片上传阿里云 Element UI 后台处理 form验证

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

          <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>


  /**logo图片上传成功 */
  Upload(file) {
    console.log(file)
    var fileName = file.file.name;
    var formname = file.data.name;
    console.log('forname',formname)
    aliupload().upload(file.file,fileName, (res) => {
      if (res.res.statusCode == "200") {
          switch(formname){
            case 'logo_ImgUrl' :
              this.form.logo_ImgUrl = res.res.requestUrls[0].split("?")[0];
              break
            case 'background_ImgUrl' :
              this.form.background_ImgUrl = res.res.requestUrls[0].split("?")[0]
              break
            case 'enterpriseProfile_ImgUrl1':
              this.form.enterpriseProfile_ImgUrl = res.res.requestUrls[0].split("?")[0]
              break
            case 'industryStatus_ImgUrl1':
              this.form.industryStatus_ImgUrl = res.res.requestUrls[0].split("?")[0]
              break
            case 'solution_ImgUrl1':
              this.form.solution_ImgUrl = res.res.requestUrls[0].split("?")[0]
              break
            case 'programmeValue_ImgUrl1':
              this.form.programmeValue_ImgUrl = res.res.requestUrls[0].split("?")[0]
              break
          }
        this.$message({
          message: "上传成功！",
          type: "success",
        });
      } else {
        this.$message.warning("上传图片失败!");
      }
    });
  }