vue上传图片

2020-04-17  本文已影响0人  指尖架构141319
          <el-row>
            <el-col >
              <el-form-item label="品牌logo:" size="small" label-width="200px" prop="brandLogoUrl">
                <span>上传矢量图,仅一张</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="padding-left: 200px;margin-top: -10px">
              <el-upload
                class="avatar-uploader"
                action="/tspeapi/om/brandManage/uploadImg"
                name="uploadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="errorUpload">
                <img v-if="form.brandLogoUrl" :src="form.brandLogoUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>
  //js
  //上传回调
   handleAvatarSuccess(res, file) {
        if(res.success == false){
          this.$message.error('上传失败')
        }else {
          this.form.brandLogoUrl = res.data
          this.imageUrl = URL.createObjectURL(file.raw);
          this.$refs.form.validate((valid)=>{});
        }
      }
上一篇 下一篇

猜你喜欢

热点阅读